@bagelink/vue 1.15.433 → 1.15.440

package/package.json

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

package/src/components/DragOver.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@bagelink/vue'
-import { ref } from 'vue'
+import { useFileDropzone } from './file-drop/useFileDropzone'
 
 const props = defineProps<{
 	multiple?: boolean
@@ -13,32 +13,10 @@ const emit = defineEmits<{
 	(e: 'addFiles', files: FileList): void
 }>()
 
-const isDragging = ref(false)
-const dragCounter = ref(0)
-
-function handleDragEnter(e: DragEvent) {
-	if (props.disabled) { return }
-	e.preventDefault()
-	e.stopPropagation()
-	dragCounter.value++
-	isDragging.value = true
-}
-
-function handleDragOver(e: DragEvent) {
-	if (props.disabled) { return }
-	e.preventDefault()
-	e.stopPropagation()
-}
-
-function handleDragLeave(e: DragEvent) {
-	if (props.disabled) { return }
-	e.preventDefault()
-	e.stopPropagation()
-	dragCounter.value--
-	if (dragCounter.value === 0) {
-		isDragging.value = false
-	}
-}
+const { isDragging, handlers } = useFileDropzone({
+	disabled: () => props.disabled,
+	onDrop: files => emit('addFiles', files),
+})
 
 function handleClick(e: MouseEvent) {
 	if (!props.browse || props.disabled) {
@@ -59,16 +37,6 @@ function handleClick(e: MouseEvent) {
 	input.click()
 }
 
-function handleDrop(e: DragEvent) {
-	if (props.disabled) { return }
-	e.preventDefault()
-	e.stopPropagation()
-	dragCounter.value = 0
-	isDragging.value = false
-
-	if (!e.dataTransfer) { return }
-	emit('addFiles', e.dataTransfer.files)
-}
 </script>
 
 <template>
@@ -78,10 +46,7 @@ function handleDrop(e: DragEvent) {
 			'is-dragging': isDragging,
 			'is-disabled': disabled,
 		}"
-		@dragenter="handleDragEnter"
-		@dragover="handleDragOver"
-		@dragleave="handleDragLeave"
-		@drop="handleDrop"
+		v-on="handlers"
 		@click="handleClick"
 	>
 		<slot />

package/src/components/dataTable/DataTable.vue

@@ -94,14 +94,18 @@ const dragHandle = computed(() => {
 const tbodyRef = ref<HTMLTableSectionElement>()
 
 const { initDraggableContainer } = useDraggable({
-	handle: dragHandle.value,
+	get handle() { return dragHandle.value },
+	get disabled() { return !isSortable.value },
 	mode: 'line',
-	items: props.data,
+	get items() { return list.value.map(entry => entry.data) },
 	onEnd: (event: DraggableEvent) => {
 		if (event.oldIndex === event.newIndex) return
-		const item = computedData.value[event.oldIndex]
-		const cleanItem = cleanTransformedData(item)
-		emit('reorder', { oldIndex: event.oldIndex, newIndex: event.newIndex, item: cleanItem })
+		const source = list.value[event.oldIndex]
+		const target = list.value[event.newIndex]
+		if (!source || !target) return
+		const cleanItem = cleanTransformedData(source.data)
+		// Virtual indices include the synthetic header at index zero.
+		emit('reorder', { oldIndex: source.index - 1, newIndex: target.index - 1, item: cleanItem })
 	}
 })
 
@@ -112,7 +116,7 @@ function reinitDrag() {
 	})
 }
 
-watch(() => props.data, reinitDrag, { deep: true })
+watch(list, reinitDrag, { flush: 'post' })
 watch(isSortable, (val) => { if (val) nextTick(reinitDrag) })
 onMounted(reinitDrag)
 
@@ -225,7 +229,7 @@ const headerFontSize = computed(() => {
 							</div>
 						</td>
 					</tr>
-					<tr v-if="props.onLastItemVisible !== undefined" ref="lastItemEl" style="height: 1px;" />
+					<tr v-if="props.onLastItemVisible !== undefined" ref="lastItemEl" data-draggable="false" style="height: 1px;" />
 				</tbody>
 			</table>
 		</div>

package/src/components/draggable/Draggable.vue

@@ -2,6 +2,7 @@
 import type { DraggableEvent } from './useDraggable'
 import { ref, watch, onMounted, nextTick } from 'vue'
 import { useDraggable } from './useDraggable'
+import { reorderItems } from './reorder'
 
 const props = withDefaults(defineProps<{
 	modelValue?: any[]
@@ -22,7 +23,7 @@ const emit = defineEmits<{
 
 const dragContainer = ref<HTMLElement>()
 
-const { initDraggableContainer } = useDraggable({
+const { initDraggableContainer } = useDraggable(() => ({
 	group: props.group,
 	handle: props.handle,
 	mode: props.mode,
@@ -30,9 +31,7 @@ const { initDraggableContainer } = useDraggable({
 	items: props.modelValue,
 	onStart: (event) => { emit('start', event) },
 	onEnd: (event: DraggableEvent) => {
-		const newList = [...props.modelValue!]
-		const [removed] = newList.splice(event.oldIndex, 1)
-		newList.splice(event.newIndex, 0, removed)
+		const newList = reorderItems(props.modelValue ?? [], event.oldIndex, event.newIndex)
 		emit('update:modelValue', newList)
 
 		emit('end', event)
@@ -42,13 +41,13 @@ const { initDraggableContainer } = useDraggable({
 			}
 		})
 	}
-})
+}))
 
 watch(() => props.modelValue, () => {
 	if (dragContainer.value) {
 		initDraggableContainer(dragContainer.value)
 	}
-}, { deep: true })
+}, { deep: true, flush: 'post' })
 
 onMounted(() => {
 	if (dragContainer.value) {

package/src/components/draggable/index.ts

@@ -2,3 +2,4 @@ export { default as Draggable } from './Draggable.vue'
 export { useDraggable } from './useDraggable'
 export type { DraggableEvent, DraggableOptions } from './useDraggable'
 export { vDraggable } from './vDraggable'
+export { insertionIndexToFinalIndex, reorderItems } from './reorder'

package/src/components/draggable/reorder.ts

@@ -0,0 +1,17 @@
+/** Convert a boundary in the original list to an index after removing the source. */
+export function insertionIndexToFinalIndex(oldIndex: number, insertionIndex: number, length: number): number {
+	if (!Number.isInteger(oldIndex) || oldIndex < 0 || oldIndex >= length
+		|| !Number.isInteger(insertionIndex) || insertionIndex < 0 || insertionIndex > length) return -1
+	return insertionIndex > oldIndex ? insertionIndex - 1 : insertionIndex
+}
+
+/** Return a reordered copy; both indices refer to item positions, not boundaries. */
+export function reorderItems<T>(items: readonly T[], oldIndex: number, newIndex: number): T[] {
+	const result = [...items]
+	if (!Number.isInteger(oldIndex) || !Number.isInteger(newIndex)
+		|| oldIndex < 0 || newIndex < 0 || oldIndex >= result.length || newIndex >= result.length
+		|| oldIndex === newIndex) return result
+	const [item] = result.splice(oldIndex, 1)
+	result.splice(newIndex, 0, item!)
+	return result
+}

package/src/components/draggable/useDraggable.ts

@@ -1,7 +1,9 @@
-import { ref, onUnmounted } from 'vue'
+import { ref, computed, toValue, getCurrentInstance, onUnmounted, type MaybeRefOrGetter } from 'vue'
+import { insertionIndexToFinalIndex } from './reorder'
 
 export interface DraggableEvent extends MouseEvent {
 	oldIndex: number
+	/** Final array index after removing the source item, in both line and ghost modes. */
 	newIndex: number
 	item?: any
 }
@@ -28,7 +30,7 @@ export interface DraggableElement extends HTMLElement {
 	__drag_data?: any
 }
 
-export function useDraggable(options: DraggableOptions = {}) {
+export function useDraggable(options: MaybeRefOrGetter<DraggableOptions> = {}) {
 	const isDragging = ref(false)
 	const dragElement = ref<DraggableElement | null>(null)
 	const ghostElement = ref<HTMLElement | null>(null)
@@ -55,14 +57,14 @@ export function useDraggable(options: DraggableOptions = {}) {
 		}
 	}
 
-	const defaultOptions: DraggableOptions = {
+	const defaultOptions = computed(() => ({
 		animation: 150,
 		mode: 'line',
 		ghostClass: 'draggable-ghost',
 		dragClass: 'draggable-dragging',
 		dropIndicatorClass: 'draggable-drop-indicator',
-		...options
-	}
+		...toValue(options)
+	}))
 
 	let startX = 0
 	let startY = 0
@@ -87,11 +89,11 @@ export function useDraggable(options: DraggableOptions = {}) {
 		element.style.margin = '0'
 		element.style.padding = '0'
 		element.style.border = '0'
-		element.showPopover()
+		element.showPopover?.()
 	}
 
 	function removeFromTopLayer(element: HTMLElement) {
-		if (element.matches(':popover-open')) element.hidePopover()
+		if (element.hidePopover && element.matches(':popover-open')) element.hidePopover()
 		element.parentNode?.removeChild(element)
 	}
 
@@ -110,15 +112,15 @@ export function useDraggable(options: DraggableOptions = {}) {
 		ghost.style.zIndex = '9999'
 		ghost.style.cursor = 'grabbing'
 		ghost.style.willChange = 'transform'
-		ghost.classList.add(defaultOptions.ghostClass!)
+		ghost.classList.add(defaultOptions.value.ghostClass!)
 		appendToTopLayer(ghost)
 		return ghost
 	}
 
-	function createDropIndicator(el: DraggableElement) {
+	function createDropIndicator() {
 		if (!isBrowser) { return null }
 		const line = document.createElement('div')
-		line.classList.add(defaultOptions.dropIndicatorClass!)
+		line.classList.add(defaultOptions.value.dropIndicatorClass!)
 		line.style.position = 'fixed'
 		line.style.pointerEvents = 'none'
 		line.style.zIndex = '9999'
@@ -179,7 +181,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	// function resetDragStyles(dragEl: DraggableElement) {
-	// 	if (defaultOptions.mode === 'ghost') {
+	// 	if (defaultOptions.value.mode === 'ghost') {
 	// 		dragEl.style.opacity = ''
 	// 		dragEl.style.transform = ''
 	// 	} else {
@@ -258,26 +260,13 @@ export function useDraggable(options: DraggableOptions = {}) {
 		document.removeEventListener('keydown', onKeyDown)
 		document.removeEventListener('touchmove', onTouchMove)
 		document.removeEventListener('touchend', onTouchEnd)
-		document.removeEventListener('touchcancel', onTouchEnd)
+		document.removeEventListener('touchcancel', cleanup)
 		window.removeEventListener('blur', cleanup)
 
-		// Remove elements with animation
-		if (ghostElement.value) {
-			ghostElement.value.style.opacity = '0'
-			ghostElement.value.style.transform += ' scale(0.8)'
-			setTimeout(() => {
-				if (ghostElement.value) removeFromTopLayer(ghostElement.value)
-				ghostElement.value = null
-			}, 150)
-		}
-
-		if (dropIndicator.value) {
-			dropIndicator.value.style.opacity = '0'
-			setTimeout(() => {
-				if (dropIndicator.value) removeFromTopLayer(dropIndicator.value)
-				dropIndicator.value = null
-			}, 150)
-		}
+		if (ghostElement.value) removeFromTopLayer(ghostElement.value)
+		if (dropIndicator.value) removeFromTopLayer(dropIndicator.value)
+		ghostElement.value = null
+		dropIndicator.value = null
 
 		// Reset all elements
 		if (dragElement.value) {
@@ -287,7 +276,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 				el.style.transform = ''
 				el.style.opacity = ''
 			})
-			dragElement.value.classList.remove(defaultOptions.dragClass!)
+			dragElement.value.classList.remove(defaultOptions.value.dragClass!)
 			dragElement.value = null
 		}
 
@@ -317,16 +306,16 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function onDragStart(e: MouseEvent) {
-		if (!isBrowser || defaultOptions.disabled) { return }
+		if (!isBrowser || isDragging.value || defaultOptions.value.disabled) { return }
 		if (e.button !== 0) { return } // Only left mouse button
 		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) { return }
 
 		const dragEl = findDraggableParent(e.target as Element)
-		if (!dragEl || dragEl.dataset.draggable === 'false') { return }
+		if (!dragEl || dragEl.dataset.draggable === 'false' || e.currentTarget !== dragEl) { return }
 
 		// If handle is specified, check if clicked element matches
-		if (defaultOptions.handle) {
-			const handleEl = (e.target as Element).closest(defaultOptions.handle)
+		if (defaultOptions.value.handle) {
+			const handleEl = (e.target as Element).closest(defaultOptions.value.handle)
 			if (!handleEl || !dragEl.contains(handleEl)) { return }
 		}
 
@@ -349,17 +338,17 @@ export function useDraggable(options: DraggableOptions = {}) {
 		}
 
 		// Only create drop indicator in line mode
-		if (defaultOptions.mode === 'line') {
-			dropIndicator.value = createDropIndicator(dragEl)
+		if (defaultOptions.value.mode === 'line') {
+			dropIndicator.value = createDropIndicator()
 		}
 
 		// Apply mode-specific styles and get shift amount
-		dragEl.classList.add(defaultOptions.dragClass!)
-		shiftAmount = defaultOptions.mode === 'ghost'
+		dragEl.classList.add(defaultOptions.value.dragClass!)
+		shiftAmount = defaultOptions.value.mode === 'ghost'
 			? handleGhostMode(dragEl)
 			: handleLineMode(dragEl)
 
-		defaultOptions.onStart?.(e)
+		defaultOptions.value.onStart?.(e)
 
 		// Prevent text selection during drag
 		if (isBrowser) {
@@ -430,7 +419,8 @@ export function useDraggable(options: DraggableOptions = {}) {
 		const newDropTarget = findDraggableParent(elementAtPoint)
 
 		// Validate drop target
-		if (!newDropTarget || newDropTarget.__drag_group !== dragElement.value.__drag_group) {
+		if (!newDropTarget || !draggedList.includes(newDropTarget)) {
+			dropTarget.value = null
 			if (dropIndicator.value) {
 				dropIndicator.value.style.display = 'none'
 			}
@@ -445,32 +435,33 @@ export function useDraggable(options: DraggableOptions = {}) {
 			dropTarget.value.__intended_index = dropIndex
 
 			// Update line indicator
-			if (dropIndicator.value && defaultOptions.mode === 'line') {
+			if (dropIndicator.value && defaultOptions.value.mode === 'line') {
 				const targetIndex = draggedList.indexOf(newDropTarget)
 				const isAfter = dropIndex > targetIndex
 				updateDropIndicator(newDropTarget, isAfter)
 			}
 
 			// Update element positions
+			const finalIndex = insertionIndexToFinalIndex(dragIndex, dropIndex, draggedList.length)
 			const shift = shiftAmount
 			draggedList.forEach((el) => {
 				// Use transform3d for better performance
-				el.style.transition = `transform ${defaultOptions.animation}ms cubic-bezier(0.2, 0, 0, 1)`
+				el.style.transition = `transform ${defaultOptions.value.animation}ms cubic-bezier(0.2, 0, 0, 1)`
 				el.style.transform = 'translate3d(0, 0, 0)'
 
 				if (el === dragElement.value) {
-					if (defaultOptions.mode === 'ghost') {
-						const offset = (dropIndex - dragIndex) * shift
+					if (defaultOptions.value.mode === 'ghost') {
+						const offset = (finalIndex - dragIndex) * shift
 						el.style.transform = `translate3d(0, ${offset}px, 0)`
 					}
 				} else {
 					const currentIndex = draggedList.indexOf(el)
-					if (dragIndex < dropIndex) {
-						if (currentIndex > dragIndex && currentIndex <= dropIndex) {
+					if (dragIndex < finalIndex) {
+						if (currentIndex > dragIndex && currentIndex <= finalIndex) {
 							el.style.transform = `translate3d(0, -${shift}px, 0)`
 						}
-					} else if (dragIndex > dropIndex) {
-						if (currentIndex >= dropIndex && currentIndex < dragIndex) {
+					} else if (dragIndex > finalIndex) {
+						if (currentIndex >= finalIndex && currentIndex < dragIndex) {
 							el.style.transform = `translate3d(0, ${shift}px, 0)`
 						}
 					}
@@ -482,6 +473,11 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function onDragEnd(e: MouseEvent) {
+		if (defaultOptions.value.disabled) { cleanup(); return }
+		if (isDragging.value) {
+			lastUpdateTime = 0
+			onDragMove(e)
+		}
 		if (!isDragging.value || !dragElement.value || !dropTarget.value) {
 			cleanup()
 			return
@@ -495,9 +491,9 @@ export function useDraggable(options: DraggableOptions = {}) {
 
 		const draggedList = list.filter(el => el.dataset.draggable !== 'false')
 		const actualDragIndex = draggedList.indexOf(dragElement.value)
-		const actualDropIndex = dropTarget.value.__intended_index!
+		const actualDropIndex = insertionIndexToFinalIndex(actualDragIndex, dropTarget.value.__intended_index!, draggedList.length)
 
-		if (actualDragIndex !== -1 && actualDropIndex !== -1) {
+		if (actualDropIndex !== -1 && actualDragIndex !== actualDropIndex) {
 			list.forEach((el) => {
 				el.style.transition = 'none'
 				el.style.transform = ''
@@ -508,16 +504,18 @@ export function useDraggable(options: DraggableOptions = {}) {
 			const dragEvent = new MouseEvent('mouseup', e) as DraggableEvent
 			dragEvent.oldIndex = actualDragIndex
 			dragEvent.newIndex = actualDropIndex
-			dragEvent.item = dragElement.value.__drag_data
+			dragEvent.item = defaultOptions.value.items?.[actualDragIndex] ?? dragElement.value.__drag_data
 
-			defaultOptions.onEnd?.(dragEvent)
+			cleanup()
+			defaultOptions.value.onEnd?.(dragEvent)
+			return
 		}
 
 		cleanup()
 	}
 
 	function onTouchStart(e: TouchEvent) {
-		if (!isBrowser || defaultOptions.disabled || !e.target) { return }
+		if (!isBrowser || defaultOptions.value.disabled || !e.target) { return }
 
 		const touch = e.touches[0]
 		if (!touch) { return }
@@ -525,9 +523,9 @@ export function useDraggable(options: DraggableOptions = {}) {
 		const target = e.target as Element
 		const draggableParent = findDraggableParent(target)
 
-		if (!draggableParent) { return }
+		if (!draggableParent || e.currentTarget !== draggableParent || isDragging.value) { return }
 
-		const { handle } = defaultOptions
+		const { handle } = defaultOptions.value
 		if (handle && !target.closest(handle)) { return }
 
 		e.preventDefault() // Prevent scrolling
@@ -548,17 +546,17 @@ export function useDraggable(options: DraggableOptions = {}) {
 		}
 
 		// Only create drop indicator in line mode
-		if (defaultOptions.mode === 'line') {
-			dropIndicator.value = createDropIndicator(draggableParent)
+		if (defaultOptions.value.mode === 'line') {
+			dropIndicator.value = createDropIndicator()
 		}
 
 		// Apply mode-specific styles and get shift amount
-		dragElement.value.classList.add(defaultOptions.dragClass!)
-		shiftAmount = defaultOptions.mode === 'ghost'
+		dragElement.value.classList.add(defaultOptions.value.dragClass!)
+		shiftAmount = defaultOptions.value.mode === 'ghost'
 			? handleGhostMode(dragElement.value)
 			: handleLineMode(dragElement.value)
 
-		defaultOptions.onStart?.(e as unknown as MouseEvent)
+		defaultOptions.value.onStart?.(e as unknown as MouseEvent)
 
 		if (isBrowser) {
 			// Prevent text selection during drag
@@ -569,7 +567,8 @@ export function useDraggable(options: DraggableOptions = {}) {
 			window.addEventListener('blur', cleanup)
 			document.addEventListener('touchmove', onTouchMove, { passive: false })
 			document.addEventListener('touchend', onTouchEnd)
-			document.addEventListener('touchcancel', onTouchEnd)
+			document.addEventListener('touchcancel', cleanup)
+			document.addEventListener('keydown', onKeyDown)
 		}
 	}
 
@@ -601,7 +600,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 		onDragEnd(mouseEvent)
 		document.removeEventListener('touchmove', onTouchMove)
 		document.removeEventListener('touchend', onTouchEnd)
-		document.removeEventListener('touchcancel', onTouchEnd)
+		document.removeEventListener('touchcancel', cleanup)
 	}
 
 	function initDraggableContainer(container: HTMLElement) {
@@ -624,17 +623,15 @@ export function useDraggable(options: DraggableOptions = {}) {
 		})
 
 		let currentIndex = 0
-		elements.forEach((el, index) => {
+		elements.forEach((el) => {
 			if (el.dataset.draggable !== 'false') {
 				el.style.userSelect = 'none'
 				el.style.webkitUserSelect = 'none'
-				el.__drag_group = options.group
+				el.__drag_group = defaultOptions.value.group
 				el.__drag_index = currentIndex++
 				el.__drag_list = elements.filter(e => e.dataset.draggable !== 'false')
 
-				if (options.items) {
-					el.__drag_data = options.items[index]
-				}
+				el.__drag_data = defaultOptions.value.items?.[el.__drag_index]
 
 				el.addEventListener('mousedown', onDragStart)
 				el.addEventListener('touchstart', onTouchStart)
@@ -642,6 +639,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 		})
 
 		cleanupFn = () => {
+			cleanup()
 			elements.forEach((el) => {
 				el.removeEventListener('mousedown', onDragStart)
 				el.removeEventListener('touchstart', onTouchStart)
@@ -653,14 +651,18 @@ export function useDraggable(options: DraggableOptions = {}) {
 		}
 	}
 
-	// Automatically clean up when component is unmounted
-	onUnmounted(() => {
+	function destroy() {
 		cleanupFn?.()
-	})
+		cleanupFn = undefined
+	}
+
+	if (getCurrentInstance()) onUnmounted(destroy)
 
 	return {
 		isDragging,
 		dragElement,
-		initDraggableContainer
+		initDraggableContainer,
+		destroy,
+		cancel: cleanup
 	}
 }

package/src/components/draggable/vDraggable.ts

@@ -1,17 +1,27 @@
-import type { Directive } from 'vue'
+import { shallowRef, type Directive } from 'vue'
 import type { DraggableOptions } from './useDraggable'
 import { useDraggable } from './useDraggable'
 
+const instances = new WeakMap<HTMLElement, {
+	options: ReturnType<typeof shallowRef<DraggableOptions>>
+	draggable: ReturnType<typeof useDraggable>
+}>()
+
 export const vDraggable: Directive<HTMLElement, DraggableOptions> = {
 	mounted(el, binding) {
-		const { initDraggableContainer } = useDraggable(binding.value || {})
-		initDraggableContainer(el)
+		const options = shallowRef(binding.value || {})
+		const draggable = useDraggable(options)
+		instances.set(el, { options, draggable })
+		draggable.initDraggableContainer(el)
 	},
 	updated(el, binding) {
-		// Only reinitialize if options changed
-		if (binding.value !== binding.oldValue) {
-			const { initDraggableContainer } = useDraggable(binding.value || {})
-			initDraggableContainer(el)
-		}
+		const instance = instances.get(el)
+		if (!instance) return
+		instance.options.value = binding.value || {}
+		instance.draggable.initDraggableContainer(el)
+	},
+	beforeUnmount(el) {
+		instances.get(el)?.draggable.destroy()
+		instances.delete(el)
 	}
 }