@bagelink/vue 1.15.253 → 1.15.261

package/package.json

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

package/src/components/Dropdown.vue

@@ -407,14 +407,14 @@ defineExpose({ show, hide, shown })
 			<div
 				:id="bglId" ref="popoverRef" popover="manual" class="bgl-dropdown m-0 p-0 border-none"
 				role="menu"
-				style="border-radius: var(--bgl-card-border-radius);"
+				style="border-radius: calc(var(--bgl-card-border-radius) * 0.7);"
 				:class="[props.popupClass, { 'bgl-dropdown--no-positioning': shouldDisablePositioning, 'bg-white shadow': props.card }]"
 				@toggle="onPopoverToggle" @mouseenter="onPopoverMouseenter" @mouseleave="onPopoverMouseleave"
 				@focus="onPopoverMouseenter" @blur="onPopoverMouseleave" @keydown="onPopoverKeydown"
 			>
 				<div class="bgl-dropdown__backdrop" />
 				<div class="bgl-dropdown__content overflow-hidden" :class="{ 'display-flex column bgl-dropdown__content--card': props.card }"
-				style="border-radius: var(--bgl-card-border-radius);">
+				style="border-radius: calc(var(--bgl-card-border-radius) * 0.7);">
 					<slot :hide :show :shown />
 				</div>
 			</div>

package/src/components/FilterQuery.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { FilterField, QueryOption, OptionsSource } from './FilterQuery.types'
+import type { AlignedPlacement } from './Dropdown.vue'
 export type { FilterField, QueryOption, OptionsSource }
 </script>
 
@@ -17,9 +18,18 @@ interface UICondition {
 	connector: LogicalOperator | ''
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	fields: FilterField[]
-}>()
+	placement?: AlignedPlacement
+	/** Render the filter controls directly instead of inside a dropdown. */
+	inline?: boolean
+	/** Keep the desktop row layout and controls on mobile screens. */
+	desktopLayoutOnMobile?: boolean
+}>(), {
+	placement: 'bottom-end',
+	inline: false,
+	desktopLayoutOnMobile: false,
+})
 
 const emit = defineEmits<{
 	change: [value: QueryConditions<T>]
@@ -35,6 +45,20 @@ const internalModel = ref<QueryConditions<T>>(collapseToPresets([...model.value]
 const { $t } = useI18n()
 const instance = getCurrentInstance()
 const hasSaveListener = computed(() => !!instance?.vnode.props?.onSave)
+const filterLabel = computed(() =>
+	activeFiltersCount.value > 0
+		? `${currentTexts.value.filter} (${activeFiltersCount.value})`
+		: currentTexts.value.filter,
+)
+const dropdownProps = computed(() => props.inline
+	? {}
+	: {
+			flat: true,
+			placement: props.placement,
+			icon: 'filter_alt',
+			value: filterLabel.value,
+			thin: true,
+		})
 
 function isComplete(c: { field: string, op: ComparisonOperator, value?: any }) {
 	if (!c.field || !c.op) return false
@@ -369,11 +393,16 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 </script>
 
 <template>
-	<Dropdown
-		flat placement="bottom-end" icon="filter_alt"
-		:value="activeFiltersCount > 0 ? `${currentTexts.filter} (${activeFiltersCount})` : currentTexts.filter" thin
+	<component
+		:is="props.inline ? 'div' : Dropdown"
+		v-bind="dropdownProps"
+		class="filter-query-wrap"
+		:class="{
+			'filter-query-inline': props.inline,
+			'filter-query-desktop-mobile': props.inline || props.desktopLayoutOnMobile,
+		}"
 	>
-		<Card class="p-05">
+		<component :is="props.inline ? 'div' : Card" :class="{ 'p-05': !props.inline }">
 			<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">
@@ -402,12 +431,14 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 								@update:model-value="(v: LogicalOperator) => onConnectorChange(condition.id, v)"
 							/>
 						</div>
-						<!-- <div v-else /> -->
 
 						<!-- Field selector -->
 					<SelectInput
 						:model-value="condition.field" :options="fields"
-						:placeholder="currentTexts.placeholders.selectField" class="m-0 light-input borderHover" searchable
+							:placeholder="currentTexts.placeholders.selectField"
+							class="m-0 light-input borderHover"
+							:class="{ 'first-filter-field': index === 0 }"
+							searchable
 						@update:model-value="(v: string) => onFieldChange(condition.id, v)"
 					/>
 
@@ -486,7 +517,8 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 
 						<!-- Remove button -->
 						<Btn
-							icon="close" thin flat size="sm" class="m_bg-gray-40 m_px-3 m_mx-auto"
+							icon="close" thin flat size="sm"
+							:class="{ 'm_bg-gray-40 m_px-3 m_mx-auto': !props.inline && !props.desktopLayoutOnMobile }"
 							@click="removeCondition(index)"
 						/>
 					</div>
@@ -507,12 +539,15 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 					/>
 				</div>
 			</div>
-		</Card>
-	</Dropdown>
+		</component>
+	</component>
 </template>
 
 <style>
-
+.filter-query-wrap{
+	font-size: var(--bgl-input-font-size);
+	--bgl-radius:var(--bgl-input-border-radius)
+}
 .and-or-select {
 --bgl-input-font-size: 12px !important;
 --input-background-color: transparent !important;
@@ -536,6 +571,44 @@ padding-top: 0 !important;
 grid-template-columns: 50px minmax(90px, 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
 }
 
+.filter-query-inline {
+width: 100%;
+max-width: 100%;
+min-width: 0;
+box-sizing: border-box;
+}
+
+.filter-query-inline > *,
+.filter-query-inline .m_overflow,
+.filter-query-inline .first-filter-row > *,
+.filter-query-inline .filter-row > * {
+max-width: 100%;
+min-width: 0;
+box-sizing: border-box;
+}
+
+.filter-query-inline .m_overflow {
+overflow-x: hidden;
+overflow-y: visible;
+max-height: none;
+}
+
+.filter-query-inline .filter-row {
+grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
+}
+
+.filter-query-inline .first-filter-row {
+grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
+}
+
+.filter-query-inline .first-filter-field {
+grid-column: span 2;
+}
+
+.filter-query-inline .min-w-450px {
+min-width: 0 !important;
+}
+
 /* Transition animations */
 .condition-enter-active,
 .condition-leave-active {
@@ -566,6 +639,20 @@ transform: translateX(-10px);
 .first-filter-row {
 	grid-template-columns: auto;
 }
+
+.filter-query-desktop-mobile .filter-row,
+.filter-query-desktop-mobile .first-filter-row {
+	grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
+}
+
+.filter-query-desktop-mobile .first-filter-row > *,
+.filter-query-desktop-mobile .filter-row > * {
+	min-width: 0;
+}
+
+.filter-query-desktop-mobile .first-filter-field {
+	grid-column: span 2;
+}
 }
 
 </style>

package/src/components/ListItem.vue

@@ -344,7 +344,7 @@ content: '';
 position: absolute;
 inset-inline: 0;
 bottom: 0;
-border-bottom: 1px solid var(--bgl-border-color);
+border-bottom: 1px solid color-mix(in srgb, var(--bgl-border-color) 50%, transparent);
 }
 .list-item-row:last-child::after,
 .list-item-row.no-border-list::after {

package/src/components/charts/ChartTooltip.vue

@@ -13,7 +13,7 @@
  * - `prefer="top"`: pinned to the top of the chart (Line, Bar) — host sets
  *   `{ left }` only; no vertical flip.
  */
-import { nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUpdated, ref, watch } from 'vue'
 import { useI18n } from '@bagelink/vue'
 
 export interface TipRow { name: string; color?: string; value: string }
@@ -56,6 +56,40 @@ function preferredSide(): 'above' | 'below' | 'top' {
 const el = ref<HTMLElement>()
 // The side actually used after measuring (may differ from the preferred one).
 const side = ref<'above' | 'below' | 'top'>(preferredSide())
+const shiftX = ref(0)
+const shiftStyle = computed(() => ({ '--bgl-tip-shift-x': `${shiftX.value}px` }))
+
+/**
+ * Keep the tooltip inside its chart. Positioning starts centered on the cursor,
+ * then this correction nudges it away from either horizontal edge.
+ */
+function clampHorizontal() {
+	const node = el.value
+	const container = node?.parentElement
+	if (!node || !container) return
+
+	const tip = node.getBoundingClientRect()
+	const bounds = container.getBoundingClientRect()
+	const padding = 8
+	const naturalLeft = tip.left - shiftX.value
+	const naturalRight = tip.right - shiftX.value
+	let nextShift = 0
+
+	if (naturalLeft < bounds.left + padding) {
+		nextShift = bounds.left + padding - naturalLeft
+	} else if (naturalRight > bounds.right - padding) {
+		nextShift = bounds.right - padding - naturalRight
+	}
+
+	if (Math.abs(nextShift - shiftX.value) > 0.5) shiftX.value = nextShift
+}
+
+function queueHorizontalClamp() {
+	nextTick(clampHorizontal)
+}
+
+onMounted(queueHorizontalClamp)
+onUpdated(queueHorizontalClamp)
 
 /**
  * Place the tooltip by the anchor's position in the viewport:
@@ -93,6 +127,7 @@ watch(
 		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' }"
+		:style="shiftStyle"
 	>
 		<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>
@@ -119,12 +154,12 @@ watch(
 
 <style scoped>
 .bgl-tip {
-	transform: translateX(-50%); transform-origin: center;
+	transform: translateX(calc(-50% + var(--bgl-tip-shift-x, 0px))); 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--below { transform: translate(-50%, 0.6rem); }
+.bgl-tip--above { transform: translate(calc(-50% + var(--bgl-tip-shift-x, 0px)), calc(-100% - 0.6rem)); }
+.bgl-tip--below { transform: translate(calc(-50% + var(--bgl-tip-shift-x, 0px)), 0.6rem); }
 .bgl-tip__dot { width: 8px; height: 8px; border-radius: 2px; }
 .bgl-tip__name { opacity: 0.7; }
 .bgl-tip__total,

package/src/components/dataTable/DataTable.vue

@@ -180,7 +180,7 @@ const headerFontSize = computed(() => {
 
 <template>
 	<div class="table-list-wrap h-100p" v-bind="containerProps" :class="{ overflowHiddenLoading: showLoading }">
-		<Loading v-if="showLoading" class="h100p" />
+		<Loading v-if="showLoading" class="absolute inset-1" />
 		<div v-if="!isEmpty" v-bind="wrapperProps" :class="{ 'pointer-events-none': showLoading }">
 			<table class="infinite-wrapper" :class="{ selecting: computedSelectedItems.length }">
 				<thead class="row first-row">

package/src/components/form/inputs/Upload/attachments.ts

@@ -0,0 +1,41 @@
+import type { AxiosResponse } from 'axios'
+import type { FileAttachment } from './upload.types'
+import { getUploadApi } from './upload'
+
+export interface AttachRequest {
+	file_id: string
+	record_id: string
+	record_type: string
+	slot?: string
+	label?: string | null
+	sort_order?: number
+}
+
+export interface AttachManyRequest {
+	file_ids: string[]
+	record_id: string
+	record_type: string
+	slot?: string
+}
+
+export const attachments = {
+	list: async (params: {
+		record_id: string
+		record_type?: string
+		slot?: string
+	}): Promise<AxiosResponse<FileAttachment[]>> => {
+		return getUploadApi().get('/files/attachments', { params })
+	},
+
+	attach: async (body: AttachRequest): Promise<AxiosResponse<FileAttachment>> => {
+		return getUploadApi().post('/files/attachments', body)
+	},
+
+	attachMany: async (body: AttachManyRequest): Promise<AxiosResponse<FileAttachment[]>> => {
+		return getUploadApi().post('/files/attachments/batch', body)
+	},
+
+	detach: async (attachmentId: string): Promise<AxiosResponse<void>> => {
+		return getUploadApi().delete(`/files/attachments/${attachmentId}`)
+	},
+}

package/src/components/form/inputs/Upload/upload.ts

@@ -10,24 +10,33 @@ export function createUploadApi(options: { baseURL?: string } = {}) {
 	}
 }
 
+/** @internal — shared with attachments.ts */
+export function getUploadApi(): AxiosInstance {
+	return api
+}
+
 export const files = {
-	get: async (pathKey?: string): Promise<AxiosResponse<BglFile>> => {
-		return api.get('/files', { params: { path_key: pathKey } })
+	get: async (pathKey: string): Promise<AxiosResponse<BglFile>> => {
+		return api.get(`/files/${pathKey}`)
+	},
+
+	patch: async (
+		pathKey: string,
+		bglFilePatch: BglFilePatch,
+	): Promise<AxiosResponse<BglFile>> => {
+		return api.patch(`/files/${pathKey}`, bglFilePatch)
 	},
 
+	/** @deprecated use patch() */
 	put: async (
 		bglFilePatch: BglFilePatch,
 		pathKey?: string
 	): Promise<AxiosResponse<BglFile>> => {
-		return api.put('/files', bglFilePatch, {
-			params: { path_key: pathKey },
-		})
+		return api.patch(`/files/${pathKey}`, bglFilePatch)
 	},
 
-	delete: async (pathKey?: string) => {
-		return api.delete(`/files/${pathKey}`, {
-			params: { path_key: pathKey },
-		})
+	delete: async (pathKey: string) => {
+		return api.delete(`/files/${pathKey}`)
 	},
 
 	upload: async (
@@ -46,7 +55,7 @@ export const files = {
 	},
 
 	list: async (dirPath?: string): Promise<AxiosResponse<BglFile[]>> => {
-		return api.get('/files/list', {
+		return api.get('/files', {
 			params: { dir_path: dirPath },
 		})
 	},

package/src/components/form/inputs/Upload/upload.types.ts

@@ -43,3 +43,21 @@ export interface QueueFile {
 	uploaded?: boolean
 	namespace?: string
 }
+
+// ---------------------------------------------------------------------------
+// Attachments
+// ---------------------------------------------------------------------------
+
+export interface FileAttachment {
+	id: string
+	file_id: string
+	record_id: string
+	record_type: string
+	slot: string
+	label?: string | null
+	sort_order: number
+	created_by?: string | null
+	created_at?: string
+	updated_at?: string
+	file?: BglFile | null
+}

package/src/components/form/inputs/Upload/useAttachments.ts

@@ -0,0 +1,175 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { FileAttachment } from './upload.types'
+import { ref, watch, toValue } from 'vue'
+import { attachments } from './attachments'
+import { files } from './upload'
+
+export interface UseAttachmentsProps {
+	/** UUID of the domain record */
+	recordId: MaybeRefOrGetter<string | undefined>
+	/** Polymorphic type, e.g. "deal_product", "person" */
+	recordType: MaybeRefOrGetter<string>
+	/** Semantic slot filter, e.g. "image", "certificate" */
+	slot?: MaybeRefOrGetter<string | undefined>
+	/** Allow multiple attachments (default true) */
+	multiple?: boolean
+	/** Auto-load on mount / when recordId changes */
+	autoLoad?: boolean
+	/** Accepted file types for browse() */
+	accept?: string
+	/** Callback after an attachment is added or removed */
+	onChange?: () => void
+}
+
+export function useAttachments(props: UseAttachmentsProps) {
+	const items = ref<FileAttachment[]>([])
+	const loading = ref(false)
+	const uploading = ref(false)
+
+	// -----------------------------------------------------------------------
+	// Load
+	// -----------------------------------------------------------------------
+
+	async function load() {
+		const rid = toValue(props.recordId)
+		if (!rid) { items.value = []; return }
+
+		loading.value = true
+		try {
+			const params: { record_id: string; record_type?: string; slot?: string } = {
+				record_id: rid,
+				record_type: toValue(props.recordType),
+			}
+			const slot = toValue(props.slot)
+			if (slot) { params.slot = slot }
+
+			const { data } = await attachments.list(params)
+			items.value = data
+		} catch (e) {
+			console.error('[useAttachments] load failed', e)
+		} finally {
+			loading.value = false
+		}
+	}
+
+	// Auto-reload when recordId changes
+	if (props.autoLoad !== false) {
+		watch(() => toValue(props.recordId), load, { immediate: true })
+	}
+
+	// -----------------------------------------------------------------------
+	// Attach
+	// -----------------------------------------------------------------------
+
+	/** Attach an already-uploaded file by its path_key */
+	async function attach(fileId: string, opts?: { label?: string; sortOrder?: number }) {
+		const rid = toValue(props.recordId)
+		if (!rid) { return }
+
+		const { data } = await attachments.attach({
+			file_id: fileId,
+			record_id: rid,
+			record_type: toValue(props.recordType),
+			slot: toValue(props.slot) || 'file',
+			label: opts?.label,
+			sort_order: opts?.sortOrder,
+		})
+
+		if (props.multiple !== false) {
+			items.value.push(data)
+		} else {
+			items.value = [data]
+		}
+		props.onChange?.()
+		return data
+	}
+
+	// -----------------------------------------------------------------------
+	// Upload + Attach in one shot
+	// -----------------------------------------------------------------------
+
+	async function uploadAndAttach(
+		file: File,
+		opts?: { label?: string; dirPath?: string; tags?: string[]; onProgress?: (pct: number) => void }
+	) {
+		const rid = toValue(props.recordId)
+		if (!rid) { return }
+
+		uploading.value = true
+		try {
+			// 1. Upload
+			const { data: uploaded } = await files.upload(file, {
+				dirPath: opts?.dirPath,
+				tags: opts?.tags,
+				onUploadProgress: (e: ProgressEvent) => {
+					opts?.onProgress?.((e.loaded / e.total) * 100)
+				},
+			})
+
+			// 2. Attach
+			return await attach(uploaded.path_key, { label: opts?.label })
+		} finally {
+			uploading.value = false
+		}
+	}
+
+	// -----------------------------------------------------------------------
+	// Detach
+	// -----------------------------------------------------------------------
+
+	async function detach(attachmentId: string) {
+		await attachments.detach(attachmentId)
+		items.value = items.value.filter(a => a.id !== attachmentId)
+		props.onChange?.()
+	}
+
+	/** Detach all items (e.g. before replacing in single mode) */
+	async function detachAll() {
+		await Promise.all(items.value.map(a => attachments.detach(a.id)))
+		items.value = []
+		props.onChange?.()
+	}
+
+	// -----------------------------------------------------------------------
+	// Browse (open file picker → upload → attach)
+	// -----------------------------------------------------------------------
+
+	function browse(opts?: { label?: string; dirPath?: string; tags?: string[] }) {
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.multiple = props.multiple !== false
+		input.accept = props.accept || ''
+
+		input.onchange = async (e: Event) => {
+			const picked = (e.target as HTMLInputElement).files
+			if (!picked) { return }
+
+			for (const file of Array.from(picked)) {
+				await uploadAndAttach(file, opts)
+			}
+		}
+
+		input.click()
+	}
+
+	return {
+		/** Reactive list of current attachments */
+		items,
+		/** True while loading attachments from server */
+		loading,
+		/** True while a file is being uploaded */
+		uploading,
+		/** Reload attachments from server */
+		load,
+		/** Attach an already-uploaded file */
+		attach,
+		/** Upload a file then attach it */
+		uploadAndAttach,
+		/** Remove an attachment (keeps the file) */
+		detach,
+		/** Remove all attachments */
+		detachAll,
+		/** Open file picker → upload → attach */
+		browse,
+	}
+}

package/src/components/form/inputs/index.ts

@@ -25,3 +25,5 @@ export { createUploadApi } from './Upload/upload'
 
 export { default as UploadInput } from './Upload/UploadInput.vue'
 export { useFileUpload } from './Upload/useFileUpload'
+export { useAttachments } from './Upload/useAttachments'
+export type { FileAttachment } from './Upload/upload.types'