@bagelink/vue 1.15.151 → 1.15.156

package/package.json

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

package/src/components/charts/BarChart.vue

@@ -177,7 +177,7 @@ const tooltipStyle = computed(() => {
 			</svg>
 
 			<ChartTooltip
-				v-if="hoverIdx != null" :style="tooltipStyle"
+				v-if="hoverIdx != null" prefer="top" :style="tooltipStyle"
 				:label="hoverLabel" :rows="hoverRows" :total="hoverTotal"
 			/>
 		</div>

package/src/components/charts/ChartTooltip.vue

@@ -6,7 +6,13 @@
  *
  * Positioned by the host via `style` (absolute left/top); the host owns
  * mouse tracking. Non-interactive (pointer-events: none).
+ *
+ * Placement is dynamic by default: the tooltip measures itself and flips to
+ * the opposite side of its anchor whenever the preferred side would clip past
+ * the top/bottom of the viewport. Hosts only express a *preferred* side via
+ * `prefer` (or the legacy `above`/`below` flags).
  */
+import { nextTick, ref, watch } from 'vue'
 import { useI18n } from '@bagelink/vue'
 
 export interface TipRow { name: string; color?: string; value: string }
@@ -16,41 +22,95 @@ defineOptions({ name: 'BglChartTooltip' })
 
 const { $t } = useI18n()
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
 	label?: string
 	/** Big focal number (used by single-value charts like the funnel). */
 	hero?: string
 	rows?: TipRow[]
 	total?: string | null
 	stats?: TipStat[]
-	/** Float above the anchor point instead of below it. */
+	/** Preferred side relative to the anchor point. The tooltip still flips to
+	    the opposite side automatically when the preferred side would clip.
+	    - `above`/`below`: cursor-anchored charts (a small gap is kept).
+	    - `top`: pinned to the top of the chart (no vertical flip). */
+	prefer?: 'above' | 'below' | 'top'
+	/** @deprecated use `prefer="above"`. Float above the anchor point. */
 	above?: boolean
+	/** @deprecated use `prefer="below"`. Float below the anchor point. */
+	below?: boolean
 }>(), {
 	rows: () => [],
 	stats: () => [],
+	prefer: 'below',
 })
+
+// Resolve the caller's preferred side (new `prefer` prop wins; fall back to the
+// legacy boolean flags for compatibility).
+function preferredSide(): 'above' | 'below' | 'top' {
+	if (props.above) return 'above'
+	if (props.below) return 'below'
+	return props.prefer
+}
+
+const el = ref<HTMLElement>()
+// The side actually used after measuring (may differ from the preferred one).
+const side = ref<'above' | 'below' | 'top'>(preferredSide())
+
+/**
+ * Place the tooltip by the anchor's position in the viewport:
+ * anchors in the top half get the tooltip *below* them, anchors in the
+ * bottom half get it *above*. `top` placements are pinned to the chart and
+ * never flip.
+ */
+function place() {
+	const node = el.value
+	const want = preferredSide()
+	if (!node || want === 'top') { side.value = want; return }
+
+	// Normalize to the `below` transform first so the measured `top` always
+	// reflects the stable anchor point (not a post-flip offset), avoiding
+	// flip-flop right around the midpoint.
+	side.value = 'below'
+	nextTick(() => {
+		const n = el.value
+		if (!n) return
+		const r = n.getBoundingClientRect()
+		side.value = r.top < window.innerHeight / 2 ? 'below' : 'above'
+	})
+}
+
+// Re-place whenever the anchor moves or the content changes.
+watch(
+	() => [props.label, props.hero, props.total, props.rows, props.stats, props.prefer, props.above, props.below],
+	place,
+	{ immediate: true, deep: true },
+)
 </script>
 
 <template>
-	<div class="bgl-tip absolute pointer-events-none nowrap z-5 color-white line-height-13" :class="{ 'bgl-tip--above': above }">
-		<p v-if="label" class="bgl-tip__label m-0">{{ label }}</p>
-		<p v-if="hero" class="bgl-tip__hero m-0 tabular-nums">{{ hero }}</p>
+	<div
+		ref="el"
+		class="bgl-tip absolute top-0 pointer-events-none nowrap z-5 color-white line-height-16"
+		:class="{ 'bgl-tip--above': side === 'above', 'bgl-tip--below': side === 'below' }"
+	>
+		<p v-if="label" class="opacity-7 txt-075rem m-0 pb-025 ">{{ label }}</p>
+		<p v-if="hero" class="m-0 tabular-nums bold pb-025 txt-1-25rem">{{ hero }}</p>
 
-		<p v-for="(r, i) in rows" :key="i" class="bgl-tip__row flex align-items-center m-0">
+		<p v-for="(r, i) in rows" :key="i" class="gap-05 flex align-items-center m-0">
 			<span v-if="r.color" class="bgl-tip__dot flex-shrink-0" :style="{ background: r.color }" />
 			<span v-if="rows.length > 1" class="bgl-tip__name">{{ r.name }}</span>
-			<span class="bgl-tip__val tabular-nums">{{ r.value }}</span>
+			<span class="ms-auto tabular-nums semibold">{{ r.value }}</span>
 		</p>
 
-		<p v-if="total" class="bgl-tip__row bgl-tip__total flex align-items-center m-0">
+		<p v-if="total" class="gap-05 bgl-tip__total flex align-items-center m-0">
 			<span class="bgl-tip__name">{{ $t('charts.total') }}</span>
-			<span class="bgl-tip__val tabular-nums">{{ total }}</span>
+			<span class="ms-auto tabular-nums semibold">{{ total }}</span>
 		</p>
 
 		<div v-if="stats.length" class="bgl-tip__stats flex column">
-			<p v-for="(s, i) in stats" :key="i" class="bgl-tip__row flex align-items-center m-0">
+			<p v-for="(s, i) in stats" :key="i" class="gap-05 flex align-items-center m-0 space-between">
 				<span class="bgl-tip__name">{{ s.label }}</span>
-				<span class="bgl-tip__val tabular-nums">{{ s.value }}</span>
+				<span class="ms-auto tabular-nums semibold">{{ s.value }}</span>
 			</p>
 		</div>
 	</div>
@@ -58,17 +118,14 @@ withDefaults(defineProps<{
 
 <style scoped>
 .bgl-tip {
-	top: 0; transform: translateX(-50%); transform-origin: center;
+	transform: translateX(-50%); transform-origin: center;
 	background: var(--bgl-black); border-radius: 0.5rem; padding: 0.4rem 0.6rem;
 	font-size: 0.75rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); min-width: 7rem;
 }
 .bgl-tip--above { transform: translate(-50%, calc(-100% - 0.6rem)); }
-.bgl-tip__label { margin-bottom: 0.2rem; opacity: 0.7; font-size: 0.7rem; }
-.bgl-tip__hero { margin-bottom: 0.2rem; font-size: 1.05rem; font-weight: 700; }
-.bgl-tip__row { gap: 0.4rem; }
+.bgl-tip--below { transform: translate(-50%, 0.6rem); }
 .bgl-tip__dot { width: 8px; height: 8px; border-radius: 2px; }
 .bgl-tip__name { opacity: 0.7; }
-.bgl-tip__val { margin-inline-start: auto; font-weight: 600; }
 .bgl-tip__total,
 .bgl-tip__stats {
 	margin-top: 0.28rem; padding-top: 0.28rem;

package/src/components/charts/Donut.vue

@@ -190,7 +190,7 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 				<span v-if="centerLabel" class="color-gray txt12">{{ centerLabel }}</span>
 			</div>
 			<ChartTooltip
-				v-if="hoverArc" above :style="tooltipStyle"
+				v-if="hoverArc" prefer="above" :style="tooltipStyle"
 				:label="hoverArc.label" :hero="hoverValue" :stats="hoverStats"
 			/>
 		</div>

package/src/components/charts/Funnel.vue

@@ -292,7 +292,7 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 
 			<!-- Shared tooltip -->
 			<ChartTooltip
-				v-if="hoverStage" above :style="tooltipStyle"
+				v-if="hoverStage" prefer="above" :style="tooltipStyle"
 				:label="hoverStage.label"
 				:hero="isSegmented ? undefined : hoverStage.display"
 				:rows="isSegmented ? hoverStage.rows : []"
@@ -306,8 +306,8 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 					v-for="(s, i) in segments" :key="i" class="bgl-funnel__tick p-05"
 					:style="horizontal ? { flex: '1 1 0' } : { height: `${bandHeight}px` }"
 				>
-					<span class="bgl-funnel__name ellipsis-1 txt12 light" :title="s.label">{{ s.label }}</span>
-					<span class="bgl-funnel__val txt24">{{ s.display }}</span>
+					<span class="bgl-funnel__name ellipsis-1 txt12 light opacity-6" :title="s.label">{{ s.label }}</span>
+					<span class="bgl-funnel__val txt24 bold">{{ s.display }}</span>
 				</div>
 			</div>
 		</div>

package/src/components/charts/LineChart.vue

@@ -231,7 +231,7 @@ const tooltipStyle = computed(() => {
 
 		<!-- shared tooltip following the mouse -->
 		<ChartTooltip
-			v-if="hoverIdx != null" :style="tooltipStyle"
+			v-if="hoverIdx != null" prefer="top" :style="tooltipStyle"
 			:label="hoverLabel" :rows="hoverRows" :total="hoverTotal"
 		/>
 	</div>

package/src/form-flow/FormFlow.vue

@@ -121,6 +121,8 @@ watch(formData, (newVal) => {
 }, { deep: true })
 
 function shouldShowField(field: FieldBuilder): boolean {
+	// Hidden fields keep their value (submitted) but are never displayed.
+	if (field._hidden) return false
 	if (field._condition == null) return true
 	return evaluateQuery(field._condition, formData.value)
 }

package/src/form-flow/MultiStepForm.vue

@@ -197,6 +197,7 @@ const stepErrors = ref<Record<string, string>>({})
 
 // Check if a field should be validated (visible based on condition)
 function shouldValidateField(field: FieldBuilder): boolean {
+	if (field._hidden) return false
 	if (field._condition == null) return true
 	return evaluateCondition(field._condition, formData.value)
 }

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

@@ -93,6 +93,8 @@ export interface FieldBuilder<TValue = any> {
 	_type: string
 	_config: BaseFieldConfig & Record<string, any>
 	_condition?: string
+	/** When true the field is never rendered but its value is still submitted. */
+	_hidden?: boolean
 	_validations?: Array<(value: TValue) => true | string>
 	_onUpdate?: (value: TValue, formData: Record<string, any>) => void
 	_class?: string
@@ -101,6 +103,8 @@ export interface FieldBuilder<TValue = any> {
 
 	// Chainable methods
 	if: (condition: string) => FieldBuilder<TValue>
+	/** Mark the field as hidden — kept in form data / submitted but not displayed. */
+	hidden: (hidden?: boolean) => FieldBuilder<TValue>
 	validate: (fn: (value: TValue) => true | string) => FieldBuilder<TValue>
 	onUpdate: (fn: (value: TValue, formData: Record<string, any>) => void) => FieldBuilder<TValue>
 	class: (className: string) => FieldBuilder<TValue>
@@ -148,6 +152,7 @@ class Field<TValue = any> implements FieldBuilder<TValue> {
 	_type: string
 	_config: BaseFieldConfig & Record<string, any>
 	_condition?: string
+	_hidden?: boolean
 	_validations?: Array<(value: TValue) => true | string>
 	_onUpdate?: (value: TValue, formData: Record<string, any>) => void
 	_class?: string
@@ -164,6 +169,11 @@ class Field<TValue = any> implements FieldBuilder<TValue> {
 		return this
 	}
 
+	hidden(hidden = true): this {
+		this._hidden = hidden
+		return this
+	}
+
 	validate(fn: (value: TValue) => true | string): this {
 		if (!this._validations) {
 			this._validations = []
@@ -574,6 +584,9 @@ class Schema<T extends Record<string, any> = Record<string, any>> implements Sch
 			// Conditional visibility
 			if (field._condition) xUi.condition = field._condition
 
+			// Hidden (submitted but not displayed)
+			if (field._hidden) xUi.hidden = true
+
 			// Array field options
 			if (field._type === 'array') {
 				if (config.allowAdd !== undefined) xUi.allowAdd = config.allowAdd
@@ -763,6 +776,7 @@ interface JSONSchemaProperty {
 		cols?: number
 		class?: string
 		condition?: string
+		hidden?: boolean
 		allowAdd?: boolean
 		allowDelete?: boolean
 		component?: string
@@ -1019,6 +1033,11 @@ function createFieldFromProperty(
 		field.if(xUi.condition)
 	}
 
+	// Apply hidden
+	if (xUi.hidden) {
+		field.hidden()
+	}
+
 	return field
 }
 

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

@@ -21,6 +21,7 @@ export type FormFieldType =
 	| 'number' | 'date' | 'email' | 'phone' | 'url'
 	| 'select' | 'radio' | 'checkbox' | 'toggle'
 	| 'file' | 'signature' | 'range' | 'color' | 'json'
+	| 'hidden'
 	| 'heading' | 'divider'
 
 export interface SelectOption {
@@ -55,6 +56,10 @@ export interface FormField {
 	/** User-authored (non-grid) classes preserved alongside layout classes. */
 	class?: string
 	hideLabel?: boolean
+	/** SCIM 2.0 filter expression controlling conditional visibility. */
+	condition?: string
+	/** When true the field is never displayed but its value is still submitted. */
+	hidden?: boolean
 	richTextVariant?: 'full' | 'basic' | 'simple'
 	markdownShowFormatting?: boolean
 	textareaRows?: number
@@ -99,6 +104,10 @@ export interface JSONSchemaProperty {
 	/** UI extension object — layout classes + render hints (shared with form-flow). */
 	'x-ui'?: {
 		class?: string
+		/** SCIM 2.0 filter expression controlling conditional visibility. */
+		condition?: string
+		/** Field kept in form data / submitted but never displayed. */
+		hidden?: boolean
 		[key: string]: any
 	}
 	'x-field-type'?: FormFieldType
@@ -145,6 +154,9 @@ export function defaultRowSpan(type: FormFieldType): number {
 	return 1
 }
 
+/** Field types that never render an input in the live form. */
+export const NON_INPUT_TYPES: FormFieldType[] = ['heading', 'divider', 'hidden']
+
 export function inferFieldType(prop: JSONSchemaProperty): FormFieldType {
 	if (prop.format) {
 		switch (prop.format) {
@@ -204,6 +216,8 @@ export function schemaToFields(schema: JSONSchemaObject | undefined): FormField[
 			mColSpan: classToMColSpan(uiClass) ?? 12,
 			class: stripGridClasses(uiClass) || undefined,
 			hideLabel: prop['x-hide-label'] ?? false,
+			condition: prop['x-ui']?.condition || undefined,
+			hidden: prop['x-ui']?.hidden || (type === 'hidden') || undefined,
 			richTextVariant: prop['x-rich-text-variant'],
 			markdownShowFormatting: prop['x-markdown-show-formatting'],
 			textareaRows: prop['x-textarea-rows'],
@@ -266,6 +280,7 @@ export function fieldsToSchema(fields: FormField[]): JSONSchemaObject {
 				case 'file':
 				case 'signature':
 				case 'color':
+				case 'hidden':
 					prop.type = 'string'
 					break
 				case 'number':
@@ -332,6 +347,10 @@ export function fieldsToSchema(fields: FormField[]): JSONSchemaObject {
 		})
 		if (layoutClass) prop['x-ui'] = { ...prop['x-ui'], class: layoutClass }
 
+		// Conditional visibility + hidden — stored in x-ui (consumed by FormFlow)
+		if (field.condition) prop['x-ui'] = { ...prop['x-ui'], condition: field.condition }
+		if (field.hidden === true) prop['x-ui'] = { ...prop['x-ui'], hidden: true }
+
 		// Boolean/enum x- extensions — only write when non-default
 		if (field.hideLabel === true) prop['x-hide-label'] = true
 		if (field.richTextVariant) prop['x-rich-text-variant'] = field.richTextVariant
@@ -412,6 +431,8 @@ export function validateFormData(fields: FormField[], data: Record<string, any>)
 
 	for (const field of fields) {
 		if (field.type === 'heading' || field.type === 'divider') continue
+		// Hidden fields are never shown, so they can't be user-corrected — skip.
+		if (field.type === 'hidden' || field.hidden === true) continue
 
 		const value = data[field.key]