@bagelink/vue 1.17.2 → 1.17.6

package/src/components/form/inputs/SelectInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { IconType, Option } from '../../../index'
-import type { AlignedPlacement } from '../../Dropdown.vue'
+import type { AlignedPlacement } from '../../Dropdown.types'
 import { Btn, Card, Skeleton, Dropdown, Icon, TextInput, useSearch, useI18n, resolveI18n } from '../../../index'
 import { computed, onMounted, ref, useId, watch } from 'vue'
 import { getOptionIcon, getOptionLabel, getOptionSubtitle, getOptionValue } from '../../../utils/options'

package/src/components/form/inputs/Upload/AssetUploadInput.vue

@@ -33,7 +33,7 @@ const { browse, addFile, fileQueue } = useFileUpload({
 		const next = props.multiple ? [...values.value] : []
 		try {
 			for (const item of props.multiple ? queued : queued.slice(0, 1)) {
-				next.push(await upload(item.file))
+				next.push(await upload(item.file, { visibility: props.assetVisibility }))
 				output([...next])
 			}
 		} catch (error) {
@@ -53,7 +53,7 @@ onScopeDispose(() => {
 <template>
 	<Card outline class="flex column gap-1 p-1" v-on="handlers">
 		<label v-if="label">{{ label }}</label>
-		<div v-for="(value, index) in values" :key="`${value.asset_id}:${value.version_id}`" class="flex gap-1 align-items-center">
+		<div v-for="(value, index) in values" :key="value.asset_id" class="flex gap-1 align-items-center">
 			<Image v-if="accept?.startsWith('image/')" :src="value" width="80" height="80" />
 			<span class="ellipsis-1">{{ value.asset_id }}</span>
 			<Btn v-if="!readonly" flat icon="close" :disabled="disabled" aria-label="Remove attachment"

package/src/components/index.ts

@@ -19,6 +19,8 @@ export { default as DragOver } from './DragOver.vue'
 export { useFileDropzone } from './file-drop/useFileDropzone'
 export type { UseFileDropzoneOptions } from './file-drop/useFileDropzone'
 export { default as Dropdown } from './Dropdown.vue'
+export type { AlignedPlacement, AnchorPoint, DropdownItem } from './Dropdown.types'
+export { default as ContextMenu } from './ContextMenu.vue'
 export { default as EmptyState } from './EmptyState.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as KanbanBoard } from './kanban/KanbanBoard.vue'
@@ -30,7 +32,7 @@ export { default as FlipBook } from './FlipBook.vue'
 export { default as FloatingPanel } from './FloatingPanel.vue'
 export * from './form'
 export { default as Icon } from './Icon/Icon.vue'
-export { FONT_AWESOME_ICONS, FONT_AWESOME_BRANDS_ICONS, MATERIAL_ICONS } from './Icon/constants'
+export { FONT_AWESOME_BRANDS_ICONS, MATERIAL_ICONS } from './Icon/constants'
 export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
 export * from './layout'

package/src/composables/index.ts

@@ -16,7 +16,7 @@ export { useImageSrc } from './useImageSrc'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
 export { createPointerSession, usePointerSession } from './usePointerSession'
-export type { PointerSessionOptions } from './usePointerSession'
+export type { PointerSessionMovePayload, PointerSessionOptions } from './usePointerSession'
 export { resizeRect, snapGridDelta } from './resizeGeometry'
 export type { ResizeRect } from './resizeGeometry'
 export { usePrefersReducedMotion } from './usePrefersReducedMotion'

package/src/composables/useBoundedRectDrag.ts

@@ -29,18 +29,14 @@ export function useBoundedRectDrag() {
 		if (!Number.isFinite(scale) || scale <= 0) return false
 		const initial = { ...options.rect }
 		const bounds = { ...options.bounds }
-		const startX = event.clientX
-		const startY = event.clientY
 		let moved = false
 		let previewed = false
-		function move(next: PointerEvent) {
-			const clientDx = next.clientX - startX
-			const clientDy = next.clientY - startY
-			if (!moved && Math.hypot(clientDx, clientDy) < (options.threshold ?? 0)) return
-			if (!moved && clientDx === 0 && clientDy === 0) return
+		function applyMove(dxClient: number, dyClient: number) {
+			if (!moved && Math.hypot(dxClient, dyClient) < (options.threshold ?? 0)) return
+			if (!moved && dxClient === 0 && dyClient === 0) return
 			moved = true
-			const dx = clientDx / scale
-			const dy = clientDy / scale
+			const dx = dxClient / scale
+			const dy = dyClient / scale
 			const rect = options.mode === 'resize'
 				? resizeRect(initial, { x: dx, y: dy }, 'se', bounds, { width: options.minWidth ?? 0, height: options.minHeight ?? 0 })
 				: {
@@ -52,9 +48,10 @@ export function useBoundedRectDrag() {
 			options.onUpdate(rect)
 		}
 		const started = session.start(event, {
-			onMove: move,
-			onEnd: next => {
-				try { move(next); options.onCommit?.(moved) } finally { active.value = false }
+			threshold: options.threshold,
+			onMove: (_next, { dx, dy }) => applyMove(dx, dy),
+			onEnd: (_next, { dx, dy }) => {
+				try { applyMove(dx, dy); options.onCommit?.(moved) } finally { active.value = false }
 			},
 			onCancel: () => {
 				active.value = false

package/src/composables/usePointerSession.ts

@@ -1,10 +1,22 @@
 import { getCurrentScope, onScopeDispose } from 'vue'
 
+export interface PointerSessionMovePayload {
+	dx: number
+	dy: number
+	distance: number
+	exceededThreshold: boolean
+}
+
 export interface PointerSessionOptions {
 	cursor?: string
-	onMove: (event: PointerEvent) => void
-	/** Commit receives the release coordinates, even when no move event preceded it. */
-	onEnd?: (event: PointerEvent) => void
+	/** Optional distance in client pixels before `exceededThreshold` becomes true. */
+	threshold?: number
+	/** Override the target element or document when starting from a delegated listener. */
+	target?: Element | Document | null
+	onThreshold?: (event: PointerEvent, payload: PointerSessionMovePayload) => void
+	onMove: (event: PointerEvent, payload: PointerSessionMovePayload) => void
+	/** Commit receives the release coordinates and movement summary, even when no move event preceded it. */
+	onEnd?: (event: PointerEvent, payload: PointerSessionMovePayload) => void
 	onCancel?: () => void
 }
 
@@ -14,17 +26,46 @@ export function createPointerSession() {
 	function cancel() { finish?.() }
 	function start(event: PointerEvent, options: PointerSessionOptions): boolean {
 		if (finish || event.button !== 0 || event.isPrimary === false) return false
-		const target = event.currentTarget as Element | null
-		const doc = target?.ownerDocument
+		const rawTarget = (options.target ?? event.currentTarget ?? event.target) as Element | Document | null
+		const doc = rawTarget && 'ownerDocument' in rawTarget
+			? (rawTarget.ownerDocument ?? (rawTarget as unknown as Document))
+			: (rawTarget as Document | null)
+		const targetEl = rawTarget && 'ownerDocument' in rawTarget && rawTarget.ownerDocument
+			? (rawTarget as Element)
+			: null
 		const view = doc?.defaultView
 		if (!view) return false
+
 		const id = event.pointerId
+		const startX = event.clientX
+		const startY = event.clientY
+		const threshold = options.threshold ?? 0
+		let exceededThreshold = threshold <= 0
+
 		const style = doc.body?.style
 		const cursor = style?.cursor ?? ''
 		const selection = style?.userSelect ?? ''
+
+		function buildPayload(next: PointerEvent): PointerSessionMovePayload {
+			const dx = (next.clientX ?? startX) - startX
+			const dy = (next.clientY ?? startY) - startY
+			const distance = Math.hypot(dx, dy)
+			if (!exceededThreshold && distance > threshold) {
+				exceededThreshold = true
+				options.onThreshold?.(next, { dx, dy, distance, exceededThreshold: true })
+			}
+			return { dx, dy, distance, exceededThreshold }
+		}
+
 		function move(next: PointerEvent) {
 			if (next.pointerId !== id) return
-			try { options.onMove(next) } catch (error) { cancel(); throw error }
+			try {
+				const payload = buildPayload(next)
+				options.onMove(next, payload)
+			} catch (error) {
+				cancel()
+				throw error
+			}
 		}
 		function up(next: PointerEvent) { if (next.pointerId === id) finish?.(next) }
 		function interrupted(next: PointerEvent) { if (next.pointerId === id) cancel() }
@@ -38,13 +79,17 @@ export function createPointerSession() {
 			view!.removeEventListener('pointercancel', interrupted)
 			view!.removeEventListener('blur', cancel)
 			view!.removeEventListener('keydown', keydown)
-			target?.removeEventListener('lostpointercapture', interrupted as EventListener)
+			targetEl?.removeEventListener('lostpointercapture', interrupted as EventListener)
 			try {
-				if (target?.hasPointerCapture?.(id)) target.releasePointerCapture(id)
+				if (targetEl?.hasPointerCapture?.(id)) targetEl.releasePointerCapture(id)
 			} catch { /* Detached targets may already have lost capture. */ }
 			if (style) { style.cursor = cursor; style.userSelect = selection }
-			if (next) options.onEnd?.(next)
-			else options.onCancel?.()
+			if (next) {
+				const payload = buildPayload(next)
+				options.onEnd?.(next, payload)
+			} else {
+				options.onCancel?.()
+			}
 		}
 		event.preventDefault()
 		if (style) {
@@ -56,8 +101,8 @@ export function createPointerSession() {
 		view.addEventListener('pointercancel', interrupted)
 		view.addEventListener('blur', cancel)
 		view.addEventListener('keydown', keydown)
-		target?.addEventListener('lostpointercapture', interrupted as EventListener)
-		try { target?.setPointerCapture?.(id) } catch { /* Window listeners remain a capture fallback. */ }
+		targetEl?.addEventListener('lostpointercapture', interrupted as EventListener)
+		try { targetEl?.setPointerCapture?.(id) } catch { /* Window listeners remain a capture fallback. */ }
 		return true
 	}
 	return { start, cancel }

package/src/directives/vResize.ts

@@ -47,8 +47,8 @@ function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
 	if (options.maxHeight !== undefined) target.setAttribute('aria-valuemax', String(options.maxHeight))
 	target.setAttribute('aria-valuenow', String(el.offsetHeight))
 
-	function update(clientY: number, startY: number, initialHeight: number): ResizeEvent {
-		const event = { clientY, deltaY: clientY - startY, initialHeight }
+	function update(clientY: number, deltaY: number, initialHeight: number): ResizeEvent {
+		const event = { clientY, deltaY, initialHeight }
 		const proposed = initialHeight + event.deltaY
 		const snapped = options.gridSize && options.gridSize > 0 ? Math.round(proposed / options.gridSize) * options.gridSize : proposed
 		const height = Math.min(options.maxHeight ?? Infinity, Math.max(options.minHeight ?? 0, snapped))
@@ -61,16 +61,15 @@ function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
 	function handleStart(event: PointerEvent) {
 		if (event.button !== 0 || event.isPrimary === false) return
 		pointer.cancel()
-		const startY = event.clientY
 		const initialHeight = el.offsetHeight
 		const originalHeight = el.style.height
 		const originalValue = target.getAttribute('aria-valuenow')
 		options.onStart?.(event)
 		pointer.start(event, {
 			cursor: 'ns-resize',
-			onMove: e => update(e.clientY, startY, initialHeight),
-			onEnd(e) {
-				const result = update(e.clientY, startY, initialHeight)
+			onMove: (e, { dy }) => update(e.clientY, dy, initialHeight),
+			onEnd(e, { dy }) {
+				const result = update(e.clientY, dy, initialHeight)
 				options.onEnd?.(result)
 			},
 			onCancel() {
@@ -92,7 +91,7 @@ function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
 			: event.key === 'End' ? options.maxHeight!
 				: initialHeight + (event.key === 'ArrowUp' ? -step : step)
 		options.onStart?.(event)
-		const result = update(height - initialHeight, 0, initialHeight)
+		const result = update(height - initialHeight, height - initialHeight, initialHeight)
 		options.onEnd?.(result)
 	}
 

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

@@ -416,8 +416,9 @@ export const $ = {
 			noFilePlaceholder?: string
 			btnPlaceholder?: string
 			style?: string
-			/** Upload to the immutable assets catalog and persist a `{asset_id, version_id}` pin. */
+			/** Upload to the immutable assets catalog and persist a `{asset_id}` pin. */
 			assetMode?: boolean
+			assetVisibility?: import('../assets').AssetVisibility
 		}),
 		config?: BaseFieldConfig & {
 			multiple?: boolean
@@ -434,8 +435,9 @@ export const $ = {
 			noFilePlaceholder?: string
 			btnPlaceholder?: string
 			style?: string
-			/** Upload to the immutable assets catalog and persist a `{asset_id, version_id}` pin. */
+			/** Upload to the immutable assets catalog and persist a `{asset_id}` pin. */
 			assetMode?: boolean
+			assetVisibility?: import('../assets').AssetVisibility
 		}
 	): FieldBuilder<string | string[]> {
 		return new Field('upload', parseArgs(labelOrConfig, config))
@@ -1248,9 +1250,12 @@ function createFieldFromProperty(
 		case 'file':
 		case 'upload':
 			// `x-asset` marks a field as managed by the immutable assets catalog:
-			// the widget uploads and persists a `{asset_id, version_id}` pin, and
+			// the widget uploads and persists a `{asset_id}` pin, and
 			// the JSON-schema type is `object`, not `string`.
 			if (resolvedProp['x-asset'] === true) config.assetMode = true
+			if (resolvedProp['x-asset-visibility']) {
+				config.assetVisibility = resolvedProp['x-asset-visibility']
+			}
 			field = $.upload(config)
 			break
 		case 'array': {

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

@@ -95,8 +95,10 @@ export interface FormField {
 	fileTheme?: 'dropzone' | 'basic'
 	fileShowIcon?: boolean
 	fileIcon?: string
-	/** Upload to the immutable assets catalog; persist a `{asset_id, version_id}` pin. */
+	/** Upload to the immutable assets catalog; persist a `{asset_id}` pin. */
 	assetMode?: boolean
+	/** Asset delivery policy. Omitted assets are protected. */
+	assetVisibility?: import('../assets').AssetVisibility
 	dateEnableTime?: boolean
 	dateMin?: string
 	dateMax?: string
@@ -166,6 +168,7 @@ export interface JSONSchemaProperty {
 	'x-file-show-icon'?: boolean
 	'x-file-icon'?: string
 	'x-asset'?: boolean
+	'x-asset-visibility'?: import('../assets').AssetVisibility
 	'x-date-enable-time'?: boolean
 	'x-date-min'?: string
 	'x-date-max'?: string
@@ -355,16 +358,15 @@ export function fieldsToSchema(
 					break
 				case 'file':
 					if (field.assetMode === true) {
-						// Immutable assets catalog: persist a `{asset_id, version_id}` pin.
+						// Public-by-default assets catalog: persist a `{asset_id}` pin.
 						// The JSON-schema type is `object` (the pin), and `x-asset` is the
 						// authoritative marker — never a `string` URL.
 						const assetRef = {
 							type: 'object',
 							properties: {
 								asset_id: { type: 'string', format: 'uuid' },
-								version_id: { type: 'string', format: 'uuid' },
 							},
-							required: ['asset_id', 'version_id'],
+							required: ['asset_id'],
 						}
 						if (field.fileMultiple === true) {
 							prop.type = 'array'
@@ -373,6 +375,9 @@ export function fieldsToSchema(
 							Object.assign(prop, assetRef)
 						}
 						prop['x-asset'] = true
+						if (field.assetVisibility) {
+							prop['x-asset-visibility'] = field.assetVisibility
+						}
 					} else if (field.fileMultiple === true) {
 						prop.type = 'array'
 						prop.items = { type: 'string' }

package/src/styles/core.css

@@ -1,7 +1,7 @@
 /* Font-neutral Bagel UI stylesheet for public/customer sites.
    Apps choose their own typography and may import optional font packs. */
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100..700,0..1,0');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/brands.min.css');
 
 @import "theme.css";
 @import "dark.css";
@@ -27,7 +27,6 @@
 @import "color-variants.css";
 
 .bgl_icon-font { font-family: 'Material Symbols Outlined', serif !important; }
-.bgl_icon-font.fa { font-family: 'Font Awesome 6 Free', serif !important; }
 .bgl_icon-font.fa-brands { font-family: 'Font Awesome 6 Brands', serif !important; }
 .bgl_icon-font.bgl_icon-round {
     display: inline-flex;
@@ -94,19 +93,3 @@ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
 	font-weight: 400;
 	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-brands-400.woff2') format('woff2');
 }
-
-@font-face {
-	font-display: swap;
-	font-family: 'Font Awesome 6 Free';
-	font-style: normal;
-	font-weight: 400;
-	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-regular-400.woff2') format('woff2');
-}
-
-@font-face {
-	font-display: swap;
-	font-family: 'Font Awesome 6 Free';
-	font-style: normal;
-	font-weight: 900;
-	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.woff2') format('woff2');
-}

package/src/types/BagelForm.ts

@@ -194,6 +194,8 @@ export interface UploadInputValueObject {
 export interface UploadInputProps extends BagelInputShellProps {
 	/** Opt-in stable reference output; defaults to legacy path-key behavior. */
 	assetMode?: boolean
+	/** Asset delivery policy. Defaults to protected; website/media fields use public. */
+	assetVisibility?: import('../assets').AssetVisibility
 	id?: string
 	name?: string
 	label?: string

package/dist/components/form/inputs/RichText/utils/formatting.d.ts

@@ -1,10 +0,0 @@
-import { EditorState } from '../richTextTypes';
-export declare function formatting(state: EditorState): {
-    text: (command: string) => void;
-    block: (command: string, tag: string) => void;
-    list: (command: string) => void;
-    clear: () => void;
-};
-export declare function getBlockElement(node: Node): HTMLElement | null;
-export declare function adjustIndentation(state: EditorState, increase: boolean): void;
-//# sourceMappingURL=formatting.d.ts.map

package/dist/components/form/inputs/RichText/utils/formatting.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/utils/formatting.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAGnD,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW;oBAIrB,MAAM;qBA4CL,MAAM,OAAO,MAAM;oBA6CpB,MAAM;;EAsN7B;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,GAAG,IAAI,CAI9D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,QAYtE"}

package/src/components/form/inputs/RichText/components/gridBox.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-const props = defineProps<{
-	gridSize?: number
-}>()
-const emit = defineEmits(['select'])
-const fb = 1
-const base = props.gridSize || 5
-const hoveredRow = ref(fb)
-const hoveredCol = ref(fb)
-
-const rowSize = computed(() => {
-	const enlarge = Math.min(hoveredRow.value + 1, 20)
-	return hoveredRow.value > (base - 1) ? enlarge : base
-})
-const colSize = computed(() => {
-	const enlarge = Math.min(hoveredCol.value + 1, 20)
-	return hoveredCol.value > (base - 1) ? enlarge : base
-})
-</script>
-
-<template>
-	<div class="grid grid-wrap p-05">
-		<div
-			v-for="row in rowSize" :key="`row-${row}`" class="flex" @mouseout="hoveredRow = fb; hoveredCol = fb"
-			@focusout="hoveredRow = fb; hoveredCol = fb"
-		>
-			<div
-				v-for="col in colSize" :key="`col-${col}`" role="button" tabindex="0" aria-label="Insert Table"
-				:style="{ width: '20px', height: '20px' }" class="flex pointer gap-025 tableBoxSelect"
-				:class="{ borderSelect: hoveredRow >= row && hoveredCol >= col }"
-				@mousemove="hoveredRow = row; hoveredCol = col" @click="emit('select', `${row}x${col}`)"
-			/>
-		</div>
-		<p class="txt-center txt-12 color-gray">
-			{{ hoveredRow }}x{{ hoveredCol }}
-		</p>
-	</div>
-</template>
-
-<style scoped>
-
-.tableBoxSelect::after {
-content: '';
-display: block;
-width: calc(100% - 4px);
-height:	calc(100% - 4px);
-border: 1px solid var(--bgl-gray);
-background: var(--bgl-gray-light);
-
-}
-.borderSelect::after {
-border-color: var(--bgl-primary-tint);
-background: var(--bgl-primary-light);
-}
-
-</style>