@bagelink/vue 0.0.1147 → 0.0.1155

package/src/components/Draggable/useDraggable.ts

@@ -0,0 +1,632 @@
+import { ref, onUnmounted } from 'vue'
+
+export interface DraggableEvent extends MouseEvent {
+	oldIndex: number
+	newIndex: number
+	item?: any
+}
+
+export interface DraggableOptions {
+	group?: string
+	animation?: number
+	disabled?: boolean
+	handle?: string
+	ghostClass?: string
+	dragClass?: string
+	mode?: 'ghost' | 'line'
+	dropIndicatorClass?: string
+	items?: any[]
+	onStart?: (event: MouseEvent) => void
+	onEnd?: (event: DraggableEvent) => void
+}
+
+export interface DraggableElement extends HTMLElement {
+	__drag_group?: string
+	__drag_index?: number
+	__drag_list?: DraggableElement[]
+	__intended_index?: number
+	__drag_data?: any
+}
+
+export function useDraggable(options: DraggableOptions = {}) {
+	const isDragging = ref(false)
+	const dragElement = ref<DraggableElement | null>(null)
+	const ghostElement = ref<HTMLElement | null>(null)
+	const dropIndicator = ref<HTMLElement | null>(null)
+	const dropTarget = ref<DraggableElement | null>(null)
+
+	const defaultOptions: DraggableOptions = {
+		animation: 150,
+		mode: 'line',
+		ghostClass: 'draggable-ghost',
+		dragClass: 'draggable-dragging',
+		dropIndicatorClass: 'draggable-drop-indicator',
+		...options
+	}
+
+	let startX = 0
+	let startY = 0
+	let initialX = 0
+	let initialY = 0
+	let shiftAmount = 0
+
+	let cleanupFn: (() => void) | undefined
+	let scrollRAF: number | null = null
+
+	let lastDropIndex = -1
+	let lastUpdateTime = 0
+	const UPDATE_THRESHOLD = 150 // ms between updates
+	const POSITION_CACHE = new Map<number, { top: number, bottom: number }>()
+
+	function createGhost(el: DraggableElement) {
+		const ghost = el.cloneNode(true) as HTMLElement
+		const rect = el.getBoundingClientRect()
+		ghost.style.position = 'fixed'
+		ghost.style.margin = '0'
+		ghost.style.top = `${rect.top}px`
+		ghost.style.left = `${rect.left}px`
+		ghost.style.width = `${rect.width}px`
+		ghost.style.height = `${rect.height}px`
+		ghost.style.transform = 'translate3d(0, 0, 0)'
+		ghost.style.pointerEvents = 'none'
+		ghost.style.zIndex = '9999'
+		ghost.style.cursor = 'grabbing'
+		ghost.style.willChange = 'transform'
+		ghost.classList.add(defaultOptions.ghostClass!)
+		document.body.appendChild(ghost)
+		return ghost
+	}
+
+	function createDropIndicator(el: DraggableElement) {
+		const line = document.createElement('div')
+		line.classList.add(defaultOptions.dropIndicatorClass!)
+		line.style.position = 'fixed'
+		line.style.pointerEvents = 'none'
+		line.style.zIndex = '9999'
+		line.style.height = '2px'
+		line.style.background = 'var(--primary-color, #0066ff)'
+		line.style.boxShadow = '0 0 4px rgba(0, 102, 255, 0.5)'
+		line.style.transition = 'all 0.15s ease'
+		line.style.display = 'none' // Start hidden
+
+		// Add the dot indicator
+		const dot = document.createElement('div')
+		dot.style.position = 'absolute'
+		dot.style.left = '-4px'
+		dot.style.top = '-3px'
+		dot.style.width = '8px'
+		dot.style.height = '8px'
+		dot.style.borderRadius = '50%'
+		dot.style.background = 'var(--primary-color, #0066ff)'
+
+		line.appendChild(dot)
+		document.body.appendChild(line)
+		return line
+	}
+
+	function updateDropIndicator(target: DraggableElement, isAfter: boolean) {
+		if (!dropIndicator.value) return
+
+		const rect = target.getBoundingClientRect()
+		dropIndicator.value.style.display = 'block'
+		dropIndicator.value.style.width = `${rect.width}px`
+		dropIndicator.value.style.left = `${rect.left}px`
+
+		// Move indicator to match the actual drop position
+		if (isAfter) {
+			dropIndicator.value.style.top = `${rect.bottom}px`
+		} else {
+			dropIndicator.value.style.top = `${rect.top}px`
+		}
+	}
+
+	function findDraggableParent(element: Element | null): DraggableElement | null {
+		let current = element
+		while (current && (!('__drag_group' in current) || (current as any).dataset.draggable === 'false')) {
+			current = current.parentElement
+		}
+		return current as DraggableElement | null
+	}
+
+	function handleGhostMode(dragEl: DraggableElement) {
+		dragEl.style.opacity = '0.4'
+		dragEl.style.transform = 'scale(0.95)'
+		return dragEl.offsetHeight
+	}
+
+	function handleLineMode(dragEl: DraggableElement) {
+		dragEl.style.opacity = '0.5'
+		return 2
+	}
+
+	function resetDragStyles(dragEl: DraggableElement) {
+		if (defaultOptions.mode === 'ghost') {
+			dragEl.style.opacity = ''
+			dragEl.style.transform = ''
+		} else {
+			dragEl.style.opacity = ''
+		}
+	}
+
+	function cacheElementPositions(draggedList: DraggableElement[]) {
+		POSITION_CACHE.clear()
+		draggedList.forEach((el, index) => {
+			const rect = el.getBoundingClientRect()
+			POSITION_CACHE.set(index, {
+				top: rect.top,
+				bottom: rect.bottom
+			})
+		})
+	}
+
+	function calculateDropIndex(e: MouseEvent, draggedList: DraggableElement[], dragIndex: number, newDropTarget: DraggableElement) {
+		const now = Date.now()
+		if (now - lastUpdateTime < UPDATE_THRESHOLD) {
+			// Return last calculated index if we're within threshold
+			return lastDropIndex !== -1 ? lastDropIndex : dragIndex
+		}
+
+		// Use cached positions if available, otherwise calculate new ones
+		if (POSITION_CACHE.size === 0) {
+			cacheElementPositions(draggedList)
+		}
+
+		const mouseY = e.clientY
+		const targetIndex = draggedList.indexOf(newDropTarget)
+		const targetPos = POSITION_CACHE.get(targetIndex)
+
+		if (!targetPos) return dragIndex
+
+		const elementHeight = targetPos.bottom - targetPos.top
+		const relativeY = mouseY - targetPos.top
+
+		// Calculate sticky zones
+		const upperSticky = elementHeight * 0.3
+		const lowerSticky = elementHeight * 0.7
+
+		let dropIndex = targetIndex
+
+		// Different behavior based on context
+		if (targetIndex === dragIndex) {
+			// On original element - require significant movement
+			if (relativeY > lowerSticky) dropIndex += 1
+		} else if (targetIndex === lastDropIndex) {
+			// On previously targeted element - use sticky zones
+			if (targetIndex > dragIndex) {
+				if (relativeY < upperSticky) dropIndex = targetIndex
+				else dropIndex = targetIndex + 1
+			} else {
+				if (relativeY > lowerSticky) dropIndex = targetIndex + 1
+				else dropIndex = targetIndex
+			}
+		} else {
+			// On new element - use 60/40 split
+			if (relativeY > elementHeight * 0.6) dropIndex += 1
+		}
+
+		// Update state
+		lastDropIndex = dropIndex
+		lastUpdateTime = now
+
+		return dropIndex
+	}
+
+	function cleanup() {
+		document.removeEventListener('mousemove', onDragMove)
+		document.removeEventListener('mouseup', onDragEnd)
+		document.removeEventListener('keydown', onKeyDown)
+		document.removeEventListener('touchmove', onTouchMove)
+		document.removeEventListener('touchend', onTouchEnd)
+		document.removeEventListener('touchcancel', onTouchEnd)
+		window.removeEventListener('blur', cleanup)
+
+		// Remove elements with animation
+		if (ghostElement.value) {
+			ghostElement.value.style.opacity = '0'
+			ghostElement.value.style.transform += ' scale(0.8)'
+			setTimeout(() => {
+				ghostElement.value?.parentNode?.removeChild(ghostElement.value)
+				ghostElement.value = null
+			}, 150)
+		}
+
+		if (dropIndicator.value) {
+			dropIndicator.value.style.opacity = '0'
+			setTimeout(() => {
+				dropIndicator.value?.parentNode?.removeChild(dropIndicator.value)
+				dropIndicator.value = null
+			}, 150)
+		}
+
+		// Reset all elements
+		if (dragElement.value) {
+			const list = dragElement.value.__drag_list
+			list?.forEach((el) => {
+				el.style.transition = ''
+				el.style.transform = ''
+				el.style.opacity = ''
+			})
+			dragElement.value.classList.remove(defaultOptions.dragClass!)
+			dragElement.value = null
+		}
+
+		isDragging.value = false
+		dropTarget.value = null
+		document.body.style.userSelect = ''
+		document.body.style.webkitUserSelect = ''
+		document.body.style.cursor = ''
+
+		if (scrollRAF) {
+			cancelAnimationFrame(scrollRAF)
+			scrollRAF = null
+		}
+
+		lastDropIndex = -1
+		lastUpdateTime = 0
+		POSITION_CACHE.clear()
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && isDragging.value) {
+			cleanup()
+		}
+	}
+
+	function onDragStart(e: MouseEvent) {
+		if (defaultOptions.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 handle is specified, check if clicked element matches
+		if (defaultOptions.handle) {
+			const handleEl = (e.target as Element).closest(defaultOptions.handle)
+			if (!handleEl || !dragEl.contains(handleEl)) return
+		}
+
+		e.preventDefault()
+		isDragging.value = true
+		dragElement.value = dragEl
+
+		// Store initial positions
+		startX = e.clientX
+		startY = e.clientY
+		const rect = dragEl.getBoundingClientRect()
+		initialX = rect.left
+		initialY = rect.top
+
+		// Create ghost element that follows mouse
+		ghostElement.value = createGhost(dragEl)
+		if (ghostElement.value) {
+			ghostElement.value.style.left = `${initialX}px`
+			ghostElement.value.style.top = `${initialY}px`
+		}
+
+		// Only create drop indicator in line mode
+		if (defaultOptions.mode === 'line') {
+			dropIndicator.value = createDropIndicator(dragEl)
+		}
+
+		// Apply mode-specific styles and get shift amount
+		dragEl.classList.add(defaultOptions.dragClass!)
+		shiftAmount = defaultOptions.mode === 'ghost'
+			? handleGhostMode(dragEl)
+			: handleLineMode(dragEl)
+
+		defaultOptions.onStart?.(e)
+
+		// Prevent text selection during drag
+		document.body.style.userSelect = 'none'
+		document.body.style.webkitUserSelect = 'none'
+
+		// Add grabbing cursor to body during drag
+		document.body.style.cursor = 'grabbing'
+
+		window.addEventListener('blur', cleanup)
+		document.addEventListener('mousemove', onDragMove)
+		document.addEventListener('mouseup', onDragEnd)
+		document.addEventListener('keydown', onKeyDown)
+	}
+
+	function findScrollParent(element: Element): Element {
+		let parent = element.parentElement
+		while (parent) {
+			const { overflow, overflowY } = window.getComputedStyle(parent)
+			if (/auto|scroll/.test(overflow + overflowY)) {
+				return parent
+			}
+			parent = parent.parentElement
+		}
+		return document.scrollingElement || document.documentElement || document.body
+	}
+
+	function autoScroll(e: MouseEvent) {
+		if (!dragElement.value) return
+		if (scrollRAF) cancelAnimationFrame(scrollRAF)
+
+		scrollRAF = requestAnimationFrame(() => {
+			const scrollParent = findScrollParent(dragElement.value!) as HTMLElement
+			const rect = scrollParent.getBoundingClientRect()
+			const margin = 50
+			const speed = Math.min(20, rect.height * 0.1) // Adjust speed based on container height
+
+			const { scrollTop } = scrollParent
+			const maxScroll = scrollParent.scrollHeight - scrollParent.clientHeight
+
+			// Use requestAnimationFrame for smoother scrolling
+			if (e.clientY - rect.top < margin) {
+				const newScroll = Math.max(0, scrollTop - speed)
+				scrollParent.scrollTop = newScroll
+			} else if (rect.bottom - e.clientY < margin) {
+				const newScroll = Math.min(maxScroll, scrollTop + speed)
+				scrollParent.scrollTop = newScroll
+			}
+		})
+	}
+
+	function onDragMove(e: MouseEvent) {
+		if (!isDragging.value || !dragElement.value) return
+
+		// Move ghost element with cursor
+		if (ghostElement.value) {
+			const dx = e.clientX - startX
+			const dy = e.clientY - startY
+			ghostElement.value.style.transform = `translate3d(${dx}px, ${dy}px, 0)`
+		}
+
+		// Get the draggable list and current positions
+		const list = dragElement.value.__drag_list!
+		const draggedList = list.filter(el => el.dataset.draggable !== 'false')
+		const dragIndex = draggedList.indexOf(dragElement.value)
+
+		// Find the element at cursor position
+		const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY)
+		const newDropTarget = findDraggableParent(elementAtPoint)
+
+		// Validate drop target
+		if (!newDropTarget || newDropTarget.__drag_group !== dragElement.value.__drag_group) {
+			if (dropIndicator.value) {
+				dropIndicator.value.style.display = 'none'
+			}
+			return
+		}
+
+		const dropIndex = calculateDropIndex(e, draggedList, dragIndex, newDropTarget)
+
+		// Only update if position actually changed
+		if (dropTarget.value !== newDropTarget || dropTarget.value.__intended_index !== dropIndex) {
+			dropTarget.value = newDropTarget
+			dropTarget.value.__intended_index = dropIndex
+
+			// Update line indicator
+			if (dropIndicator.value && defaultOptions.mode === 'line') {
+				const isAfter = dropIndex > dragIndex
+				updateDropIndicator(newDropTarget, isAfter)
+			}
+
+			// Update element positions
+			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.transform = 'translate3d(0, 0, 0)'
+
+				if (el === dragElement.value) {
+					if (defaultOptions.mode === 'ghost') {
+						const offset = (dropIndex - dragIndex) * shift
+						el.style.transform = `translate3d(0, ${offset}px, 0)`
+					}
+				} else {
+					const currentIndex = draggedList.indexOf(el)
+					if (dragIndex < dropIndex) {
+						if (currentIndex > dragIndex && currentIndex <= dropIndex) {
+							el.style.transform = `translate3d(0, -${shift}px, 0)`
+						}
+					} else if (dragIndex > dropIndex) {
+						if (currentIndex >= dropIndex && currentIndex < dragIndex) {
+							el.style.transform = `translate3d(0, ${shift}px, 0)`
+						}
+					}
+				}
+			})
+		}
+
+		autoScroll(e)
+	}
+
+	function onDragEnd(e: MouseEvent) {
+		if (!isDragging.value || !dragElement.value || !dropTarget.value) {
+			cleanup()
+			return
+		}
+
+		const list = dragElement.value.__drag_list
+		if (!list || !list.length) {
+			cleanup()
+			return
+		}
+
+		const draggedList = list.filter(el => el.dataset.draggable !== 'false')
+		const actualDragIndex = draggedList.indexOf(dragElement.value)
+		const actualDropIndex = dropTarget.value.__intended_index!
+
+		if (actualDragIndex !== -1 && actualDropIndex !== -1) {
+			list.forEach((el) => {
+				el.style.transition = 'none'
+				el.style.transform = ''
+			})
+
+			void document.body.offsetHeight
+
+			const dragEvent = new MouseEvent('mouseup', e) as DraggableEvent
+			dragEvent.oldIndex = actualDragIndex
+			dragEvent.newIndex = actualDropIndex
+			dragEvent.item = dragElement.value.__drag_data
+
+			defaultOptions.onEnd?.(dragEvent)
+		}
+
+		cleanup()
+	}
+
+	function onTouchStart(e: TouchEvent) {
+		if (defaultOptions.disabled || !e.target) return
+
+		const touch = e.touches[0]
+		if (!touch) return
+
+		const target = e.target as Element
+		const draggableParent = findDraggableParent(target)
+
+		if (!draggableParent) return
+
+		const { handle } = defaultOptions
+		if (handle && !target.closest(handle)) return
+
+		e.preventDefault() // Prevent scrolling
+		isDragging.value = true
+		dragElement.value = draggableParent
+
+		startX = touch.clientX
+		startY = touch.clientY
+		const rect = draggableParent.getBoundingClientRect()
+		initialX = rect.left
+		initialY = rect.top
+
+		// Rest of the setup same as onDragStart...
+		ghostElement.value = createGhost(draggableParent)
+		if (ghostElement.value) {
+			ghostElement.value.style.left = `${initialX}px`
+			ghostElement.value.style.top = `${initialY}px`
+		}
+
+		// Only create drop indicator in line mode
+		if (defaultOptions.mode === 'line') {
+			dropIndicator.value = createDropIndicator(draggableParent)
+		}
+
+		// Apply mode-specific styles and get shift amount
+		dragElement.value.classList.add(defaultOptions.dragClass!)
+		shiftAmount = defaultOptions.mode === 'ghost'
+			? handleGhostMode(dragElement.value)
+			: handleLineMode(dragElement.value)
+
+		defaultOptions.onStart?.(e as unknown as MouseEvent)
+
+		// Prevent text selection during drag
+		document.body.style.userSelect = 'none'
+		document.body.style.webkitUserSelect = 'none'
+
+		// Add grabbing cursor to body during drag
+		document.body.style.cursor = 'grabbing'
+
+		window.addEventListener('blur', cleanup)
+		document.addEventListener('touchmove', onTouchMove, { passive: false })
+		document.addEventListener('touchend', onTouchEnd)
+		document.addEventListener('touchcancel', onTouchEnd)
+	}
+
+	function onTouchMove(e: TouchEvent) {
+		e.preventDefault() // Prevent scrolling
+		const touch = e.touches[0]
+		if (!touch) return
+
+		const mouseEvent = {
+			clientX: touch.clientX,
+			clientY: touch.clientY,
+			target: document.elementFromPoint(touch.clientX, touch.clientY)
+		} as MouseEvent
+
+		onDragMove(mouseEvent)
+		autoScroll(mouseEvent)
+	}
+
+	function onTouchEnd(e: TouchEvent) {
+		const touch = e.changedTouches[0]
+		if (!touch) return
+
+		const mouseEvent = {
+			clientX: touch.clientX,
+			clientY: touch.clientY,
+			target: document.elementFromPoint(touch.clientX, touch.clientY)
+		} as MouseEvent
+
+		onDragEnd(mouseEvent)
+		document.removeEventListener('touchmove', onTouchMove)
+		document.removeEventListener('touchend', onTouchEnd)
+		document.removeEventListener('touchcancel', onTouchEnd)
+	}
+
+	function initDraggableContainer(container: HTMLElement) {
+		cleanupFn?.()
+
+		// Reset state
+		isDragging.value = false
+		dragElement.value = null
+		ghostElement.value = null
+		dropIndicator.value = null
+		dropTarget.value = null
+
+		const elements = Array.from(container.children) as DraggableElement[]
+
+		elements.forEach((el) => {
+			delete el.__drag_group
+			delete el.__drag_index
+			delete el.__drag_list
+		})
+
+		let currentIndex = 0
+		elements.forEach((el, index) => {
+			if (el.dataset.draggable !== 'false') {
+				el.style.userSelect = 'none'
+				el.style.webkitUserSelect = 'none'
+				el.__drag_group = options.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.addEventListener('mousedown', onDragStart)
+				el.addEventListener('touchstart', onTouchStart)
+			}
+		})
+
+		cleanupFn = () => {
+			elements.forEach((el) => {
+				el.removeEventListener('mousedown', onDragStart)
+				el.removeEventListener('touchstart', onTouchStart)
+				delete el.__drag_group
+				delete el.__drag_index
+				delete el.__drag_list
+			})
+			cleanup()
+		}
+	}
+
+	// Automatically clean up when component is unmounted
+	onUnmounted(() => {
+		cleanupFn?.()
+	})
+
+	return {
+		isDragging,
+		dragElement,
+		initDraggableContainer
+	}
+}
+
+// Simplified default styles
+const style = document.createElement('style')
+style.textContent = `
+  .draggable-ghost {
+    opacity: 0.5;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    transition: transform 0.1s;
+
+  }
+`
+document.head.appendChild(style)

package/src/components/Draggable/vDraggable.ts

@@ -0,0 +1,17 @@
+import type { Directive } from 'vue'
+import type { DraggableOptions } from './useDraggable'
+import { useDraggable } from './useDraggable'
+
+export const vDraggable: Directive<HTMLElement, DraggableOptions> = {
+	mounted(el, binding) {
+		const { initDraggableContainer } = useDraggable(binding.value || {})
+		initDraggableContainer(el)
+	},
+	updated(el, binding) {
+		// Only reinitialize if options changed
+		if (binding.value !== binding.oldValue) {
+			const { initDraggableContainer } = useDraggable(binding.value || {})
+			initDraggableContainer(el)
+		}
+	}
+}

package/src/components/ListView.vue

@@ -1,8 +1,12 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useSlots } from 'vue'
+
+const slots = useSlots()
+</script>
 
 <template>
 	<div class="list-wrap bgl_card thin grid overflow-hidden h-100 pt-0 pb-05 px-0 m_pb-0">
-		<div class="p-1">
+		<div v-if="slots.header" class="p-1">
 			<slot name="header" />
 		</div>
 		<div class="list-content auto-flow-rows align-items-start overflow-y h-100">

package/src/components/Pill.vue

@@ -92,7 +92,7 @@ const computedBackgroundColor = $computed(
 			</div>
 			<Icon v-if="icon" :icon="icon" />
 			<slot />
-			<template v-if="!slots.default && (value)">
+			<template v-if="!slots.default">
 				{{ value || modelValue }}
 			</template>
 			<Icon v-if="iconEnd" :icon="iconEnd" />