@bagelink/vue 1.15.147 → 1.15.154

package/dist/utils/index.d.ts

@@ -56,5 +56,35 @@ export { d, DateChain, dateDiff, DAY, fmtDate, formatDate, getDatePartsMap, hand
 export * from './fetch';
 export * from './string';
 export { formatString } from './strings';
+/** An option produced by `createOptionsGetter`: `{ label, value }` plus the full source item. */
+export type ItemOption<T> = {
+    label: string;
+    value: any;
+} & T;
+/** A memoized async options loader compatible with `$.select`/`SelectInput`. */
+export type OptionsGetter<T> = ((filter?: string) => Promise<ItemOption<T>[]>) & {
+    clearCache: () => void;
+};
+/**
+ * Build a memoized async options loader for select inputs from a list fetcher.
+ *
+ * - Fetches once and caches; `clearCache()` invalidates.
+ * - When called with a `filter` string, fuzzy-matches on the option label and
+ *   returns the best matches first (so async `SelectInput`s search client-side).
+ * - The default mapper derives `label` from `name`/`title`/`id` and `value` from
+ *   `id`; pass `mapper` for anything else (e.g. value = name). The full source
+ *   item is spread onto the option so callers can read extra fields.
+ *
+ * @example
+ * const getCityOptions = createOptionsGetter(() => api.cities.get())
+ * const getModelOptions = createOptionsGetter(
+ *   () => api.models(),
+ *   (m) => ({ label: m.name, value: m.name, ...m }),
+ * )
+ */
+export declare function createOptionsGetter<T extends Record<string, any>>(fetcher: (filter?: string) => Promise<T[] | {
+    data?: T[];
+    items?: T[];
+}>, mapper?: (item: T) => ItemOption<T>): OptionsGetter<T>;
 export { useDebounceFn } from '@vueuse/core';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/charts/Funnel.vue

@@ -303,11 +303,11 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 			<!-- Axis labels: left gutter (vertical) or below each stage (horizontal) -->
 			<div class="bgl-funnel__axis">
 				<div
-					v-for="(s, i) in segments" :key="i" class="bgl-funnel__tick"
+					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 txt14" :title="s.label">{{ s.label }}</span>
-					<span class="bgl-funnel__val txt13">{{ 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>
@@ -337,41 +337,42 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 </template>
 
 <style scoped>
-/* Flow */
-.bgl-funnel__seg { transition: opacity 0.15s ease; outline: none; }
-.bgl-funnel__seg:hover { opacity: 0.85; cursor: default; }
-.bgl-funnel__seg:focus, .bgl-funnel__sub:focus, .bgl-funnel__hit:focus { outline: none; }
-.bgl-funnel__sub { stroke: var(--bgl-box-bg); stroke-width: 0.4; outline: none; }
-.bgl-funnel__hit { cursor: default; outline: none; }
+/* ── Flow: SVG segments ──────────────────────────── */
+.bgl-funnel__seg,
+.bgl-funnel__sub,
+.bgl-funnel__hit   { outline: none; cursor: default; }
+.bgl-funnel__seg   { transition: opacity 0.15s ease; }
+.bgl-funnel__seg:hover { opacity: 0.85; }
+.bgl-funnel__sub   { stroke: var(--bgl-box-bg); stroke-width: 0.4; }
 .bgl-funnel__hit:hover { fill: rgba(255, 255, 255, 0.06); }
-.bgl-funnel__legend { list-style: none; margin: 0.75rem 0 0; padding: 0; gap: 0.5rem 1rem; font-size: 0.8rem; }
+.bgl-funnel__val   { font-variant-numeric: tabular-nums; }
+
+/* ── Legend ───────────────────────────────────────── */
+.bgl-funnel__legend    { list-style: none; margin: 0.75rem 0 0; padding: 0; gap: 0.5rem 1rem; font-size: 0.8rem; }
 .bgl-funnel__legend li { gap: 0.4rem; }
-.bgl-funnel__dot { width: 10px; height: 10px; border-radius: 3px; }
-.bgl-funnel__val { font-variant-numeric: tabular-nums; }
+.bgl-funnel__dot       { width: 10px; height: 10px; border-radius: 3px; }
 
-/* Vertical flow: silhouette (fills) + right axis gutter */
+/* ── Vertical flow ───────────────────────────────── */
 .bgl-funnel--vertical .bgl-funnel__flow { display: flex; align-items: stretch; gap: 0.75rem; width: 100%; }
-.bgl-funnel--vertical .bgl-funnel__svg { flex: 1 1 auto; width: auto; min-width: 0; }
+.bgl-funnel--vertical .bgl-funnel__svg  { flex: 1 1 auto; width: auto; min-width: 0; }
 .bgl-funnel--vertical .bgl-funnel__axis { flex: 0 0 auto; display: flex; flex-direction: column; }
-.bgl-funnel--vertical .bgl-funnel__tick {
-	display: flex; flex-direction: column; justify-content: center; line-height: 1.3; max-width: 12rem;
-}
+.bgl-funnel--vertical .bgl-funnel__tick { display: flex; flex-direction: column; justify-content: center; line-height: 1.3; max-width: 12rem; }
 
-/* Horizontal flow: silhouette on top, labels below each stage */
+/* ── Horizontal flow ─────────────────────────────── */
 .bgl-funnel--horizontal .bgl-funnel__flow { display: flex; flex-direction: column; gap: 0.4rem; }
-.bgl-funnel--horizontal .bgl-funnel__svg { width: 100%; }
+.bgl-funnel--horizontal .bgl-funnel__svg  { width: 100%; }
 .bgl-funnel--horizontal .bgl-funnel__axis { display: flex; }
-.bgl-funnel--horizontal .bgl-funnel__tick {
-	display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; overflow: hidden; padding: 0 0.25rem;
-}
+.bgl-funnel--horizontal .bgl-funnel__tick { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; overflow: hidden; padding: 0 0.25rem; }
 
-/* Bars */
-.bgl-funnel--bars { display: grid; gap: 0.5rem; }
-.bgl-funnel__stage { display: grid; grid-template-columns: minmax(60px, 22%) 1fr; align-items: center; gap: 0.75rem; }
+/* ── Discrete bars ───────────────────────────────── */
+.bgl-funnel--bars              { display: grid; gap: 0.5rem; }
 .bgl-funnel--bars .bgl-funnel__name { color: var(--bgl-text); font-weight: 500; }
+.bgl-funnel__stage { display: grid; grid-template-columns: minmax(60px, 22%) 1fr; align-items: center; gap: 0.75rem; }
 .bgl-funnel__bar {
-	height: 38px; border-radius: 8px; color: var(--bgl-white); font-weight: 600; font-size: 0.85rem;
+	height: 38px; border-radius: 8px; min-width: 2.5rem;
+	color: var(--bgl-white); font-weight: 600; font-size: 0.85rem;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	min-width: 2.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); cursor: default;
+	cursor: default;
 }
 </style>

package/src/components/charts/RankBars.vue

@@ -54,14 +54,16 @@ const rows = computed(() => {
 </script>
 
 <template>
-	<div class="bgl-rank grid w-100p gap-05">
-		<div v-for="(r, i) in rows" :key="i" class="bgl-rank__row align-items-center grid gap-075">
-			<span class="bgl-rank__label ellipsis-1 txt14" :title="r.label">{{ r.label }}</span>
-			<span class="bgl-rank__track overflow-hidden round">
-				<span class="bgl-rank__bar display-block round" :style="{ width: `${r.pct}%`, background: r.color }" />
-			</span>
-			<span class="txt13 tabular-nums semibold">{{ r.display }}</span>
-		</div>
+	<div class="bgl-rank grid w-100p gap-05 overflow">
+	<div>
+			<div v-for="(r, i) in rows" :key="i" class="bgl-rank__row align-items-center grid gap-075">
+				<span class="bgl-rank__label ellipsis-1 txt14" :title="r.label">{{ r.label }}</span>
+				<span class="bgl-rank__track overflow-hidden round">
+					<span class="bgl-rank__bar display-block round" :style="{ width: `${r.pct}%`, background: r.color }" />
+				</span>
+				<span class="txt13 tabular-nums semibold">{{ r.display }}</span>
+			</div>
+	</div>
 	</div>
 </template>
 

package/src/form-flow/FormFlow.vue

@@ -121,10 +121,25 @@ 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)
 }
 
+// Fields whose options depend on a sibling (via `.if('<dep> …')`) must remount
+// when that sibling changes so a function option-loader re-runs with the new
+// value. `useSearch` only reloads on search-term change, so we fold the
+// referenced field's current value into the field's render key. Extracts the
+// first field name from the condition (e.g. `provider pr` → `provider`).
+function fieldKey(key: string, field: FieldBuilder): string {
+	if (field._condition == null) return key
+	const dep = field._condition.trim().split(/\s+/)[0]
+	if (!dep) return key
+	const depVal = getNestedValue(formData.value, dep)
+	return depVal == null ? key : `${key}:${String(depVal)}`
+}
+
 const visibleFields = computed(() => {
 	const fields: Array<{ key: string, field: FieldBuilder }> = []
 
@@ -258,6 +273,16 @@ function getFieldProps(field: FieldBuilder, key: string) {
 		baseProps.multiselect = true
 	}
 
+	// Function option loaders get the live form data as a 2nd arg so options can
+	// depend on sibling fields (e.g. `model` filtered by the selected `provider`).
+	// SelectInput/useSearch only re-run the loader on search-term change; a change
+	// to a dependency is handled by re-keying the field (see fieldKey) so it
+	// remounts and reloads.
+	if ((field._type === 'select' || field._type === 'multiselect') && typeof baseProps.options === 'function') {
+		const loader = baseProps.options
+		baseProps.options = (query: string) => loader(query, formData.value)
+	}
+
 	if (field._type === 'json') {
 		baseProps.language = baseProps.language ?? 'json'
 	}
@@ -375,7 +400,7 @@ defineExpose({
 			<slot name="success" :form-data="formData" />
 		</template>
 		<template v-else>
-			<div v-for="{ key, field } in visibleFields" :key="key" :class="[field._class, field._config.class]">
+			<div v-for="{ key, field } in visibleFields" :key="fieldKey(key, field)" :class="[field._class, field._config.class]">
 				<!-- Custom slot for specific field -->
 				<slot
 					:name="`field:${key}`"

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

@@ -25,8 +25,10 @@ export interface SelectOption<T extends string = string> {
 	icon?: IconType
 }
 
-/** Async options loader function */
-export type AsyncOptionsLoader<T extends string = string> = (query: string) => Promise<(T | SelectOption<T>)[]>
+/** Async options loader function. Receives the search query and, when rendered
+ *  inside FormFlow, the current form data — so options can depend on sibling
+ *  fields (e.g. a `model` list filtered by the selected `provider`). */
+export type AsyncOptionsLoader<T extends string = string> = (query: string, form: Record<string, any>) => Promise<(T | SelectOption<T>)[]>
 
 /** Options can be string array, object array, or async loader function */
 export type SelectOptions<T extends string = string>
@@ -91,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
@@ -99,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>
@@ -146,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
@@ -162,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 = []
@@ -572,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
@@ -761,6 +776,7 @@ interface JSONSchemaProperty {
 		cols?: number
 		class?: string
 		condition?: string
+		hidden?: boolean
 		allowAdd?: boolean
 		allowDelete?: boolean
 		component?: string
@@ -1017,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]
 

package/src/utils/index.ts

@@ -379,4 +379,62 @@ export * from './fetch'
 export * from './string'
 
 export { formatString } from './strings'
+
+// ─── Async select options ─────────────────────────────────────────────────────
+
+import { fuzzyMatch } from './string'
+
+/** An option produced by `createOptionsGetter`: `{ label, value }` plus the full source item. */
+export type ItemOption<T> = { label: string, value: any } & T
+
+/** A memoized async options loader compatible with `$.select`/`SelectInput`. */
+export type OptionsGetter<T> = ((filter?: string) => Promise<ItemOption<T>[]>) & { clearCache: () => void }
+
+/**
+ * Build a memoized async options loader for select inputs from a list fetcher.
+ *
+ * - Fetches once and caches; `clearCache()` invalidates.
+ * - When called with a `filter` string, fuzzy-matches on the option label and
+ *   returns the best matches first (so async `SelectInput`s search client-side).
+ * - The default mapper derives `label` from `name`/`title`/`id` and `value` from
+ *   `id`; pass `mapper` for anything else (e.g. value = name). The full source
+ *   item is spread onto the option so callers can read extra fields.
+ *
+ * @example
+ * const getCityOptions = createOptionsGetter(() => api.cities.get())
+ * const getModelOptions = createOptionsGetter(
+ *   () => api.models(),
+ *   (m) => ({ label: m.name, value: m.name, ...m }),
+ * )
+ */
+export function createOptionsGetter<T extends Record<string, any>>(
+	fetcher: (filter?: string) => Promise<T[] | { data?: T[], items?: T[] }>,
+	mapper?: (item: T) => ItemOption<T>,
+): OptionsGetter<T> {
+	let cache: ItemOption<T>[] | null = null
+	const getter = (async (filter?: string) => {
+		try {
+			if (!cache) {
+				const result = await fetcher(filter)
+				const items: T[] = Array.isArray(result) ? result : (result.data || result.items || [])
+				cache = items.map(item => mapper
+					? mapper(item)
+					: ({ label: item.name || item.title || `${item.id}`, value: item.id, ...item }))
+			}
+			if (filter && cache) {
+				return cache
+					.map(item => ({ item, match: fuzzyMatch(item.label, filter) }))
+					.filter(({ match }) => match.matches)
+					.sort((a, b) => b.match.score - a.match.score)
+					.map(({ item }) => item)
+			}
+			return cache || []
+		} catch (error) {
+			console.error('Error fetching options:', error)
+			return []
+		}
+	}) as OptionsGetter<T>
+	getter.clearCache = () => { cache = null }
+	return getter
+}
 export { useDebounceFn } from '@vueuse/core'