@bagelink/vue 1.15.333 → 1.15.340

package/package.json

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

package/src/components/Dropdown.vue

@@ -404,13 +404,16 @@ defineExpose({ show, hide, shown })
 		<div
 			v-if="!referenceEl"
 			ref="triggerWrapRef" v-bind="$attrs"
-			aria-haspopup="menu"
-			:aria-expanded="shown"
-			:aria-controls="bglId"
 			@mouseenter="onTriggerMouseenter" @mouseleave="onTriggerMouseleave" @focus="onTriggerMouseenter"
 			@blur="onTriggerMouseleave" @keydown="onTriggerKeydown"
 		>
-			<slot name="trigger" :show :hide :shown>
+			<slot
+				name="trigger"
+				:show
+				:hide
+				:shown
+				:trigger-attrs="{ 'aria-haspopup': 'menu', 'aria-expanded': shown, 'aria-controls': bglId }"
+			>
 				<Btn
 					:class="triggerClass" :iconEnd :icon="iconSet" :value :thin :flat :outline :frame :round :color
 					:disabled @click="onTriggerClick"

package/src/components/draggable/useDraggable.ts

@@ -78,6 +78,23 @@ export function useDraggable(options: DraggableOptions = {}) {
 	const UPDATE_THRESHOLD = 150 // ms between updates
 	const POSITION_CACHE = new Map<number, { top: number, bottom: number }>()
 
+	function appendToTopLayer(element: HTMLElement) {
+		document.body.appendChild(element)
+		element.setAttribute('popover', 'manual')
+		// The browser's popover UA styles use `inset: 0; margin: auto`, which
+		// recentres fixed-position drag helpers and offsets them from the cursor.
+		element.style.inset = 'auto'
+		element.style.margin = '0'
+		element.style.padding = '0'
+		element.style.border = '0'
+		element.showPopover()
+	}
+
+	function removeFromTopLayer(element: HTMLElement) {
+		if (element.matches(':popover-open')) element.hidePopover()
+		element.parentNode?.removeChild(element)
+	}
+
 	function createGhost(el: DraggableElement) {
 		if (!isBrowser) { return null }
 		const ghost = el.cloneNode(true) as HTMLElement
@@ -94,7 +111,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 		ghost.style.cursor = 'grabbing'
 		ghost.style.willChange = 'transform'
 		ghost.classList.add(defaultOptions.ghostClass!)
-		document.body.appendChild(ghost)
+		appendToTopLayer(ghost)
 		return ghost
 	}
 
@@ -122,7 +139,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 		dot.style.background = 'var(--primary-color, #0066ff)'
 
 		line.appendChild(dot)
-		document.body.appendChild(line)
+		appendToTopLayer(line)
 		return line
 	}
 
@@ -249,7 +266,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 			ghostElement.value.style.opacity = '0'
 			ghostElement.value.style.transform += ' scale(0.8)'
 			setTimeout(() => {
-				ghostElement.value?.parentNode?.removeChild(ghostElement.value)
+				if (ghostElement.value) removeFromTopLayer(ghostElement.value)
 				ghostElement.value = null
 			}, 150)
 		}
@@ -257,7 +274,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 		if (dropIndicator.value) {
 			dropIndicator.value.style.opacity = '0'
 			setTimeout(() => {
-				dropIndicator.value?.parentNode?.removeChild(dropIndicator.value)
+				if (dropIndicator.value) removeFromTopLayer(dropIndicator.value)
 				dropIndicator.value = null
 			}, 150)
 		}

package/src/form-flow/FormFlow.vue

@@ -389,6 +389,13 @@ function getFieldProps(field: FieldBuilder, key: string) {
 	return baseProps
 }
 
+function getCustomFieldProps(field: FieldBuilder, key: string) {
+	return {
+		...(field._component?.props ?? {}),
+		...getFieldProps(field, key),
+	}
+}
+
 function resolveComponent(componentRef: any): any {
 	if (typeof componentRef === 'string') {
 		if (props.components?.[componentRef] != null) {
@@ -556,9 +563,7 @@ defineExpose({
 					<template v-else-if="usesCustomComponent(field)">
 						<component
 							:is="resolveComponent(field._component!.component)"
-							:model-value="getFieldValue(key)"
-							v-bind="field._component!.props"
-							@update:model-value="(val: any) => updateField(key, val, field)"
+							v-bind="getCustomFieldProps(field, key)"
 						/>
 					</template>
 

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

@@ -759,6 +759,7 @@ interface JSONSchemaProperty {
 	'title'?: string
 	'description'?: string
 	'default'?: any
+	'const'?: any
 	'enum'?: any[]
 	'format'?: string
 	'minimum'?: number
@@ -1065,6 +1066,27 @@ function createFieldFromProperty(
 			field = $.text(config)
 	}
 
+	// Rendering is orthogonal to semantics: a checkbox may use a branded
+	// component while remaining a checkbox for validation and serialization.
+	if (
+		xUi.component
+		&& fieldType !== 'component'
+		&& fieldType !== 'display'
+	) {
+		field._component = {
+			component: xUi.component,
+			props: xUi.componentProps || {},
+		}
+	}
+
+	if (resolvedProp.const !== undefined) {
+		field.validate(value =>
+			value === resolvedProp.const
+				? true
+				: config.requiredMessage || 'form.required'
+		)
+	}
+
 	// Apply class
 	if (xUi.class) {
 		field.class(xUi.class)

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

@@ -101,6 +101,7 @@ export interface FormField {
 export interface JSONSchemaProperty {
 	type?: string | string[]
 	items?: JSONSchemaProperty
+	const?: any
 	title?: string
 	description?: string
 	format?: string
@@ -354,7 +355,12 @@ export function fieldsToSchema(fields: FormField[]): JSONSchemaObject {
 			if (field.validation?.pattern !== undefined) prop.pattern = field.validation.pattern
 
 			// Required
-			if (field.required) required.push(field.key)
+			if (field.required) {
+				required.push(field.key)
+				// Required checkboxes represent explicit acceptance, not merely
+				// presence of a boolean key.
+				if (field.type === 'checkbox') prop.const = true
+			}
 		}
 
 		// Placeholder