@bagelink/vue 1.10.35 → 1.10.37

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.10.35",
+  "version": "1.10.37",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.10.35"
+    "@bagelink/utils": "1.10.37"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

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

@@ -423,7 +423,7 @@ onMounted(() => {
 }
 
 .selectinput .bagel-input.mb-0 input {
-	background: transparent !important;
+	/* background: transparent !important; */
 }
 
 .selectinput-btn:disabled {

package/src/components/layout/Panel.vue

@@ -0,0 +1,278 @@
+<script lang="ts" setup>
+import type { PanelConfig, PanelState } from '../../composables/useResizableLayout'
+import { computed, inject, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { RESIZABLE_KEY, nextPanelId } from '../../composables/useResizableLayout'
+
+const props = withDefaults(defineProps<Props>(), {
+	defaultSize: 200,
+	min: 0,
+	max: Number.POSITIVE_INFINITY,
+	collapsible: false,
+	collapsed: undefined,
+	flex: false,
+	handle: true,
+})
+
+const emit = defineEmits<{
+	'update:collapsed': [value: boolean]
+	'update:size': [value: number]
+}>()
+
+interface Props {
+	id?: string
+	/** Initial size in pixels. @default 200 */
+	defaultSize?: number
+	/** Controlled size — use with v-model:size to drive from outside (e.g. device presets). */
+	size?: number
+	/** Minimum size in pixels. @default 0 */
+	min?: number
+	/** Maximum size in pixels. @default Infinity */
+	max?: number
+	/** Allows the panel to be collapsed. Exposes toggleCollapse via slot + v-model:collapsed. */
+	collapsible?: boolean
+	/** Controlled collapsed state — use with v-model:collapsed. */
+	collapsed?: boolean
+	/** Fill all remaining space in the layout. */
+	flex?: boolean
+	/** Collapse this panel when the layout switches to mobile. */
+	collapseOnMobile?: boolean
+	/** Hide this panel entirely when the layout switches to mobile. */
+	hideOnMobile?: boolean
+	/** Show a drag handle on the trailing edge of this panel. @default true */
+	handle?: boolean
+}
+
+const ctx = inject(RESIZABLE_KEY)!
+if (!ctx) throw new Error('<Panel> must be used inside a <Resizable>')
+
+// Stable ID for the lifetime of this instance
+const panelId = props.id ?? nextPanelId()
+
+const panelState = shallowRef<PanelState | null>(null)
+const panelEl = ref<HTMLElement | null>(null)
+
+// ── Collapsed (controlled / uncontrolled) ──────────────────────────────────
+
+const collapsedInternal = computed({
+	get: () => props.collapsed ?? panelState.value?.collapsed.value ?? false,
+	set(val) {
+		if (panelState.value) panelState.value.collapsed.value = val
+		emit('update:collapsed', val)
+	},
+})
+
+watch(() => props.collapsed, (val) => {
+	if (val !== undefined && panelState.value) panelState.value.collapsed.value = val
+})
+
+// ── Size (controlled / uncontrolled) ──────────────────────────────────────
+
+// Prop → internal (button presets, external control)
+watch(() => props.size, (val) => {
+	if (val === undefined || !panelState.value) return
+	const clamped = Math.max(props.min, Math.min(props.max, val))
+	if (clamped !== panelState.value.size.value) panelState.value.size.value = clamped
+})
+
+// Internal → prop (drag end syncs back up via v-model:size)
+// Skip the initial mount transition (undefined → number) to avoid spurious emits
+watch(
+	() => panelState.value?.size.value,
+	(newSize, oldSize) => {
+		if (newSize !== undefined && oldSize !== undefined) emit('update:size', newSize)
+	},
+)
+
+// ── Lifecycle ──────────────────────────────────────────────────────────────
+
+onMounted(() => {
+	const config: PanelConfig = {
+		id: panelId,
+		defaultSize: props.size ?? props.defaultSize,
+		min: props.min,
+		max: props.max,
+		flex: props.flex,
+		collapseOnMobile: props.collapseOnMobile ?? false,
+		hideOnMobile: props.hideOnMobile ?? false,
+	}
+	panelState.value = ctx.registerPanel(config)
+	panelState.value.el.value = panelEl.value
+	if (props.collapsed !== undefined) panelState.value.collapsed.value = props.collapsed
+})
+
+onUnmounted(() => { ctx.unregisterPanel(panelId) })
+
+// ── Computed state ─────────────────────────────────────────────────────────
+
+const size = computed(() => panelState.value?.size.value ?? props.defaultSize)
+const isCollapsed = computed(() => collapsedInternal.value)
+const isHorizontal = computed(() => ctx.direction.value === 'horizontal')
+const isHidden = computed(() => ctx.isMobile.value && props.hideOnMobile)
+
+// Default to false (show handle) before mount so handles appear on first render.
+// After registration the correct last-panel is identified reactively.
+const isLastPanel = computed(() => {
+	const ps = ctx.panels.value
+	const idx = ps.findIndex(p => p.id === panelId)
+	return idx >= 0 && idx === ps.length - 1
+})
+
+const panelStyle = computed(() => {
+	if (isCollapsed.value) {
+		return isHorizontal.value
+			? { flex: '0 0 0px', width: '0px', minWidth: '0', overflow: 'hidden' }
+			: { flex: '0 0 0px', height: '0px', minHeight: '0', overflow: 'hidden' }
+	}
+	if (props.flex) {
+		return isHorizontal.value
+			? { flex: '1 1 0', minWidth: `${props.min}px`, maxWidth: props.max === Number.POSITIVE_INFINITY ? undefined : `${props.max}px`, overflow: 'hidden' }
+			: { flex: '1 1 0', minHeight: `${props.min}px`, maxHeight: props.max === Number.POSITIVE_INFINITY ? undefined : `${props.max}px`, overflow: 'hidden' }
+	}
+	return isHorizontal.value
+		? { flex: `0 0 ${size.value}px`, width: `${size.value}px`, overflow: 'hidden' }
+		: { flex: `0 0 ${size.value}px`, height: `${size.value}px`, overflow: 'hidden' }
+})
+
+// ── Exposed / slot API ─────────────────────────────────────────────────────
+
+function toggleCollapse() {
+	collapsedInternal.value = !collapsedInternal.value
+}
+
+defineExpose({ toggleCollapse, size, isCollapsed })
+</script>
+
+<template>
+	<div
+		v-if="!isHidden" ref="panelEl" class="panel"
+		:class="[isHorizontal ? 'panel--h' : 'panel--v', isCollapsed && 'panel--collapsed']" :style="panelStyle"
+	>
+		<div class="panel__content">
+			<slot :collapsed="isCollapsed" :size="size" :toggle-collapse="toggleCollapse" />
+		</div>
+
+		<div
+			v-if="props.handle && !isLastPanel && !isCollapsed" class="panel__handle"
+			:class="isHorizontal ? 'panel__handle--h' : 'panel__handle--v'"
+			@pointerdown="ctx.onHandlePointerDown(panelId, $event)"
+		>
+			<div class="panel__handle-bar" />
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.panel {
+	position: relative;
+	display: flex;
+	overflow: hidden;
+	/* transition: flex-basis 0.2s ease, width 0.2s ease, height 0.2s ease; */
+}
+
+/* Disable transitions while dragging so the handle tracks the pointer exactly */
+:global(.resizable[data-resizing]) .panel {
+	transition: none !important;
+}
+
+/* Prevent iframes from absorbing pointer events and triggering expensive
+   cross-process reflows on every resize tick */
+:global(.resizable[data-resizing]) iframe,
+:global(.resizable[data-resizing]) video {
+	pointer-events: none !important;
+}
+
+.panel--h {
+	flex-direction: row;
+}
+
+.panel--v {
+	flex-direction: column;
+}
+
+.panel__content {
+	flex: 1 1 0;
+	overflow: hidden;
+	min-width: 0;
+	min-height: 0;
+}
+
+/* ─── Handle ─────────────────────────────────────────────────────────────── */
+
+.panel__handle {
+	flex-shrink: 0;
+	position: relative;
+	z-index: 10;
+	touch-action: none;
+	user-select: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.panel__handle--h {
+	width: var(--resizable-handle-size, 9px);
+	cursor: ew-resize;
+}
+
+.panel__handle--v {
+	height: var(--resizable-handle-size, 9px);
+	cursor: ns-resize;
+}
+
+/* Persistent 1px divider */
+.panel__handle::before {
+	content: '';
+	position: absolute;
+	border-radius: 9999px;
+	background: var(--resizable-divider-color, color-mix(in srgb, currentColor 14%, transparent));
+	transition: background 0.15s;
+}
+
+.panel__handle--h::before {
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 1px;
+	height: 100%;
+}
+
+.panel__handle--v::before {
+	left: 0;
+	right: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	height: 1px;
+	width: 100%;
+}
+
+/* Grip pill — fades in on hover */
+.panel__handle-bar {
+	position: relative;
+	z-index: 1;
+	border-radius: 9999px;
+	background: var(--resizable-grip-color, var(--color-primary, #3b82f6));
+	opacity: 0;
+	transition: opacity 0.15s, transform 0.15s;
+	transform: scale(0.8);
+}
+
+.panel__handle--h .panel__handle-bar {
+	width: 3px;
+	height: 24px;
+}
+
+.panel__handle--v .panel__handle-bar {
+	height: 3px;
+	width: 24px;
+}
+
+.panel__handle:hover::before {
+	background: var(--resizable-divider-active-color, var(--color-primary, #3b82f6));
+}
+
+.panel__handle:hover .panel__handle-bar {
+	opacity: 1;
+	transform: scale(1);
+}
+</style>

package/src/components/layout/Resizable.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
+import { RESIZABLE_KEY, useResizableLayoutProvider } from '../../composables/useResizableLayout'
+
+interface Props {
+	/** Lay panels side-by-side. Default: vertical (stacked). */
+	horizontal?: boolean
+	/**
+	 * Stack panels vertically when the container is narrower than `breakpoint`.
+	 * Only applies when `horizontal` is set. Default: true.
+	 * Set `:breakpoint="0"` to disable responsive switching entirely.
+	 */
+	mobileVertical?: boolean
+	/** Width (px) below which the mobile layout activates. @default 768 */
+	breakpoint?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	horizontal: false,
+	mobileVertical: true,
+	breakpoint: 768,
+})
+
+const containerEl = ref<HTMLElement>()
+const directionProp = computed(() => props.horizontal ? 'horizontal' as const : 'vertical' as const)
+const mobileDirection = computed(() => props.mobileVertical || !props.horizontal ? 'vertical' as const : 'horizontal' as const,
+)
+
+const { context, observe, disconnect } = useResizableLayoutProvider({
+	directionProp,
+	mobileDirection: mobileDirection.value,
+	breakpoint: props.breakpoint,
+	containerEl,
+})
+
+provide(RESIZABLE_KEY, context)
+onMounted(observe)
+onUnmounted(disconnect)
+
+const isHorizontal = computed(() => context.direction.value === 'horizontal')
+</script>
+
+<template>
+	<div ref="containerEl" class="resizable" :class="isHorizontal ? 'resizable--row' : 'resizable--col'">
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+.resizable {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.resizable--row {
+	flex-direction: row;
+}
+
+.resizable--col {
+	flex-direction: column;
+}
+</style>

package/src/components/layout/index.ts

@@ -3,6 +3,8 @@ export { default as AppLayout } from './AppLayout.vue'
 export { default as AppSidebar } from './AppSidebar.vue'
 export { default as BottomMenu } from './BottomMenu.vue'
 export { default as Layout } from './Layout.vue'
+export { default as Panel } from './Panel.vue'
+export { default as Resizable } from './Resizable.vue'
 export { default as SidebarMenu } from './SidebarMenu.vue'
 export { default as Skeleton } from './Skeleton.vue'
 export { default as TabbedLayout } from './TabbedLayout.vue'

package/src/composables/index.ts

@@ -9,6 +9,8 @@ export { useDevice } from './useDevice'
 export { useExcel } from './useExcel'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
+export { useResizableLayoutProvider } from './useResizableLayout'
+export type { PanelConfig, PanelState, ResizableContext } from './useResizableLayout'
 export { useResizeObserver } from './useResizeObserver'
 export { useTheme } from './useTheme'
 interface UseBglSchemaParamsT<T> {

package/src/composables/useResizableLayout.ts

@@ -0,0 +1,252 @@
+import type { InjectionKey, Ref } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
+
+export interface PanelConfig {
+	id: string
+	defaultSize: number
+	min: number
+	max: number
+	flex: boolean
+	collapseOnMobile: boolean
+	hideOnMobile: boolean
+}
+
+export interface PanelState {
+	id: string
+	config: PanelConfig
+	size: Ref<number>
+	collapsed: Ref<boolean>
+	/** DOM reference set by Panel.vue for direct style mutation during drag. */
+	el: Ref<HTMLElement | null>
+}
+
+export interface ResizableContext {
+	direction: Ref<'horizontal' | 'vertical'>
+	isMobile: Ref<boolean>
+	panels: Ref<PanelState[]>
+	registerPanel: (config: PanelConfig) => PanelState
+	unregisterPanel: (id: string) => void
+	onHandlePointerDown: (panelId: string, event: PointerEvent) => void
+}
+
+export const RESIZABLE_KEY: InjectionKey<ResizableContext> = Symbol('Resizable')
+
+let _panelUid = 0
+export function nextPanelId(): string {
+	return `panel-${++_panelUid}`
+}
+
+// ─── Internal drag state ───────────────────────────────────────────────────
+
+interface DragState {
+	panelId: string
+	pointerId: number
+	isHorizontal: boolean
+	isRtl: boolean
+	startPos: number
+	startSizeA: number
+	startSizeB: number
+	currentSizeA: number
+	currentSizeB: number
+	indexA: number
+	indexB: number
+	isFlexA: boolean
+	isFlexB: boolean
+	elA: HTMLElement | null
+	elB: HTMLElement | null
+}
+
+// ─── Provider ──────────────────────────────────────────────────────────────
+
+export function useResizableLayoutProvider(options: {
+	directionProp: Ref<'horizontal' | 'vertical'>
+	mobileDirection: 'horizontal' | 'vertical'
+	breakpoint: number
+	containerEl: Ref<HTMLElement | undefined>
+}) {
+	const { containerEl, breakpoint, mobileDirection } = options
+
+	const isMobile = ref(false)
+	const panels = shallowRef<PanelState[]>([])
+
+	const direction = computed<'horizontal' | 'vertical'>(() => isMobile.value ? mobileDirection : options.directionProp.value,
+	)
+
+	// ── Breakpoint detection ──
+	let ro: ResizeObserver | null = null
+
+	function observe() {
+		if (!containerEl.value) return
+		ro?.disconnect()
+		ro = new ResizeObserver((entries) => {
+			const entry = entries[0]
+			if (entry) isMobile.value = entry.contentRect.width < breakpoint
+		})
+		ro.observe(containerEl.value)
+		isMobile.value = containerEl.value.clientWidth < breakpoint
+	}
+
+	function disconnect() {
+		ro?.disconnect()
+		ro = null
+	}
+
+	// On mobile switch: apply collapsed state overrides
+	watch(isMobile, (mobile) => {
+		for (const panel of panels.value) {
+			const { config } = panel
+			panel.collapsed.value = mobile
+				? (config.collapseOnMobile || false)
+				: false
+		}
+	})
+
+	// ── Panel registry ──
+	function registerPanel(config: PanelConfig): PanelState {
+		const state: PanelState = {
+			id: config.id,
+			config,
+			size: ref(config.defaultSize),
+			collapsed: ref(isMobile.value ? config.collapseOnMobile : false),
+			el: ref(null),
+		}
+		panels.value = [...panels.value, state]
+		return state
+	}
+
+	function unregisterPanel(id: string) {
+		panels.value = panels.value.filter(p => p.id !== id)
+	}
+
+	function getPanelIndex(id: string) {
+		return panels.value.findIndex(p => p.id === id)
+	}
+
+	// ── Drag ──
+	// Cleanup function for the current drag's document-level listeners.
+	// Called at the start of every pointerdown to clear any previously stuck drag.
+	let dragCleanup: (() => void) | null = null
+
+	function flushResize(ds: DragState, currentPos: number) {
+		const rawDelta = currentPos - ds.startPos
+		const delta = ds.isRtl ? -rawDelta : rawDelta
+
+		const panelA = panels.value[ds.indexA]
+		const panelB = panels.value[ds.indexB]
+		const minA = panelA.config.min
+		const maxA = panelA.config.max
+		const minB = panelB.config.min
+		const maxB = panelB.config.max
+
+		let newA = ds.currentSizeA
+		let newB = ds.currentSizeB
+
+		if (ds.isFlexB) {
+			newA = Math.max(minA, Math.min(maxA, ds.startSizeA + delta))
+		}
+		else if (ds.isFlexA) {
+			newB = Math.max(minB, Math.min(maxB, ds.startSizeB - delta))
+		}
+		else {
+			const proposed = Math.max(minA, Math.min(maxA, ds.startSizeA + delta))
+			const actualDelta = proposed - ds.startSizeA
+			newB = Math.max(minB, Math.min(maxB, ds.startSizeB - actualDelta))
+			newA = ds.startSizeA + (ds.startSizeB - newB)
+		}
+
+		ds.currentSizeA = newA
+		ds.currentSizeB = newB
+
+		// Direct DOM mutation — bypasses Vue scheduler for zero-overhead drag
+		const dim = ds.isHorizontal ? 'width' : 'height'
+		if (ds.elA && !ds.isFlexA) {
+			ds.elA.style.flex = `0 0 ${newA}px`
+			ds.elA.style[dim] = `${newA}px`
+		}
+		if (ds.elB && !ds.isFlexB) {
+			ds.elB.style.flex = `0 0 ${newB}px`
+			ds.elB.style[dim] = `${newB}px`
+		}
+	}
+
+	function onHandlePointerDown(panelId: string, event: PointerEvent) {
+		// Always clean up any previously stuck drag before starting a new one
+		dragCleanup?.()
+
+		const indexA = getPanelIndex(panelId)
+		if (indexA < 0 || indexA >= panels.value.length - 1) return
+
+		const panelA = panels.value[indexA]
+		const panelB = panels.value[indexA + 1]
+		if (panelA.collapsed.value || panelB.collapsed.value) return
+
+		event.preventDefault()
+
+		const isHorizontal = direction.value === 'horizontal'
+		const pos = isHorizontal ? event.clientX : event.clientY
+		const isRtl = isHorizontal
+			&& !!containerEl.value
+			&& getComputedStyle(containerEl.value).direction === 'rtl'
+
+		const ds: DragState = {
+			panelId,
+			pointerId: event.pointerId,
+			isHorizontal,
+			isRtl,
+			startPos: pos,
+			startSizeA: panelA.size.value,
+			startSizeB: panelB.size.value,
+			currentSizeA: panelA.size.value,
+			currentSizeB: panelB.size.value,
+			indexA,
+			indexB: indexA + 1,
+			isFlexA: panelA.config.flex,
+			isFlexB: panelB.config.flex,
+			elA: panelA.el.value,
+			elB: panelB.el.value,
+		}
+		containerEl.value?.setAttribute('data-resizing', '')
+		document.body.style.userSelect = 'none'
+		document.body.style.cursor = isHorizontal ? 'ew-resize' : 'ns-resize'
+
+		function onMove(e: PointerEvent) {
+			if (e.pointerId !== ds.pointerId) return
+			flushResize(ds, ds.isHorizontal ? e.clientX : e.clientY)
+		}
+
+		function onUp(e: PointerEvent) {
+			if (e.pointerId !== ds.pointerId) return
+			flushResize(ds, ds.isHorizontal ? e.clientX : e.clientY)
+			// Single Vue update at drag end — syncs DOM state back to reactive refs
+			panels.value[ds.indexA].size.value = ds.currentSizeA
+			panels.value[ds.indexB].size.value = ds.currentSizeB
+			cleanup()
+		}
+
+		function cleanup() {
+			dragCleanup = null
+			containerEl.value?.removeAttribute('data-resizing')
+			document.body.style.userSelect = ''
+			document.body.style.cursor = ''
+			document.removeEventListener('pointermove', onMove)
+			document.removeEventListener('pointerup', onUp)
+			document.removeEventListener('pointercancel', cleanup)
+		}
+
+		document.addEventListener('pointermove', onMove)
+		document.addEventListener('pointerup', onUp)
+		document.addEventListener('pointercancel', cleanup)
+		dragCleanup = cleanup
+	}
+
+	const context: ResizableContext = {
+		direction,
+		isMobile,
+		panels,
+		registerPanel,
+		unregisterPanel,
+		onHandlePointerDown,
+	}
+
+	return { context, observe, disconnect }
+}