@bagelink/vue 1.15.145 → 1.15.151

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.145",
+  "version": "1.15.151",
   "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" :title="s.label">{{ s.label }}</span>
+					<span class="bgl-funnel__val txt24">{{ 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/components/layout/AppContent.vue

@@ -288,6 +288,7 @@ flex-wrap: wrap;
 @media screen and (max-width: 910px) {
 .app-header {
 row-gap: 0.25rem;
+justify-content: space-between;
 }
 }
 
@@ -310,7 +311,7 @@ row-gap: 0.5rem;
 @media screen and (max-width: 910px) {
 .app-header-side {
 row-gap: 0.25rem;
-flex-grow: 1;
+flex-grow: unset;
 }
 }
 

package/src/form-flow/FormFlow.vue

@@ -125,6 +125,19 @@ function shouldShowField(field: FieldBuilder): boolean {
 	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 +271,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 +398,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/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>

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'