@bagelink/vue 0.0.1218 → 0.0.1224

package/src/directives/vResize.ts

@@ -0,0 +1,205 @@
+import type { Directive } from 'vue'
+
+export interface ResizeEvent {
+	clientY: number
+	deltaY: number
+	initialHeight: number
+}
+
+export interface ResizeOptions {
+	onStart?: (event: MouseEvent | TouchEvent) => void
+	onResize?: (event: ResizeEvent) => void
+	onEnd?: (event: ResizeEvent) => void
+	minHeight?: number
+	maxHeight?: number
+	handle?: string
+	gridSize?: number
+	handleClass?: string
+}
+
+const RESIZE_KEY = Symbol('resize')
+
+function initResize(el: HTMLElement, binding: { value?: ResizeOptions }) {
+	const options = binding.value || {}
+	let isResizing = false
+	let startY = 0
+	let startHeight = 0
+	let handleElement: HTMLElement | null = null
+
+	// Create or find the resize handle
+	if (options.handle) {
+		handleElement = el.querySelector(options.handle) as HTMLElement
+		if (!handleElement) {
+			// If handle not found, create it
+			handleElement = document.createElement('div')
+			handleElement.className = options.handle.replace('.', '') + (options.handleClass ? ` ${options.handleClass}` : '')
+			handleElement.style.cssText = `
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				height: 6px;
+				background: rgba(0, 0, 0, 0.1);
+				cursor: ns-resize;
+				transition: background 0.2s;
+			`
+			el.appendChild(handleElement)
+		}
+	} else {
+		handleElement = el
+	}
+
+	// Add hover effect
+	handleElement.addEventListener('mouseenter', () => {
+		if (handleElement !== el) { // Only change background if it's a dedicated handle
+			handleElement!.style.background = 'rgba(0, 0, 0, 0.2)'
+		}
+	})
+	handleElement.addEventListener('mouseleave', () => {
+		if (handleElement !== el && !isResizing) { // Only change background if it's a dedicated handle and not resizing
+			handleElement!.style.background = 'rgba(0, 0, 0, 0.1)'
+		}
+	})
+
+	handleElement.style.cursor = 'ns-resize'
+	handleElement.style.userSelect = 'none'
+
+	function createResizeEvent(clientY: number): ResizeEvent {
+		return {
+			clientY,
+			deltaY: clientY - startY,
+			initialHeight: startHeight
+		}
+	}
+
+	function applyGridSnapping(height: number): number {
+		if (!options.gridSize) return height
+		return Math.round(height / options.gridSize) * options.gridSize
+	}
+
+	function handleMove(e: MouseEvent | TouchEvent) {
+		if (!isResizing) return
+		e.preventDefault()
+
+		const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
+		const event = createResizeEvent(clientY)
+		let newHeight = startHeight + event.deltaY
+
+		// Apply min/max constraints
+		if (options.minHeight !== undefined) {
+			newHeight = Math.max(newHeight, options.minHeight)
+		}
+		if (options.maxHeight !== undefined) {
+			newHeight = Math.min(newHeight, options.maxHeight)
+		}
+
+		// Apply grid snapping if enabled
+		newHeight = applyGridSnapping(newHeight)
+
+		el.style.height = `${newHeight}px`
+
+		if (options.onResize) {
+			options.onResize(event)
+		}
+
+		// Update handle appearance during resize
+		if (handleElement !== el) {
+			handleElement!.style.background = 'rgba(0, 0, 0, 0.3)'
+		}
+	}
+
+	function handleEnd(e: MouseEvent | TouchEvent) {
+		if (!isResizing) return
+
+		const clientY = 'touches' in e ? e.changedTouches[0].clientY : e.clientY
+		const event = createResizeEvent(clientY)
+
+		isResizing = false
+		document.body.style.cursor = ''
+		document.body.style.userSelect = ''
+
+		// Reset handle appearance
+		if (handleElement !== el) {
+			handleElement!.style.background = 'rgba(0, 0, 0, 0.1)'
+		}
+
+		if (options.onEnd) {
+			options.onEnd(event)
+		}
+
+		document.removeEventListener('mousemove', handleMove)
+		document.removeEventListener('mouseup', handleEnd)
+		document.removeEventListener('touchmove', handleMove)
+		document.removeEventListener('touchend', handleEnd)
+		document.removeEventListener('touchcancel', handleEnd)
+	}
+
+	function handleStart(e: MouseEvent | TouchEvent) {
+		// Only handle left mouse button for mouse events
+		if (e instanceof MouseEvent && e.button !== 0) return
+
+		e.preventDefault()
+		isResizing = true
+
+		startY = 'touches' in e ? e.touches[0].clientY : e.clientY
+		startHeight = el.offsetHeight
+
+		if (options.onStart) {
+			options.onStart(e)
+		}
+
+		document.body.style.cursor = 'ns-resize'
+		document.body.style.userSelect = 'none'
+
+		document.addEventListener('mousemove', handleMove, { passive: false })
+		document.addEventListener('mouseup', handleEnd)
+		document.addEventListener('touchmove', handleMove, { passive: false })
+		document.addEventListener('touchend', handleEnd)
+		document.addEventListener('touchcancel', handleEnd)
+	}
+
+	// Add initial event listeners
+	handleElement.addEventListener('mousedown', handleStart)
+	handleElement.addEventListener('touchstart', handleStart, { passive: false })
+
+	// Store cleanup function
+	;(el as any)[RESIZE_KEY] = () => {
+		if (handleElement !== el) {
+			el.removeChild(handleElement!)
+		}
+		handleElement.removeEventListener('mousedown', handleStart)
+		handleElement.removeEventListener('touchstart', handleStart)
+		handleElement.removeEventListener('mouseenter', handleStart)
+		handleElement.removeEventListener('mouseleave', handleStart)
+		document.removeEventListener('mousemove', handleMove)
+		document.removeEventListener('mouseup', handleEnd)
+		document.removeEventListener('touchmove', handleMove)
+		document.removeEventListener('touchend', handleEnd)
+		document.removeEventListener('touchcancel', handleEnd)
+	}
+}
+
+export const vResize: Directive<HTMLElement, ResizeOptions> = {
+	mounted(el, binding) {
+		initResize(el, binding)
+	},
+
+	unmounted(el) {
+		const cleanup = (el as any)[RESIZE_KEY]
+		if (typeof cleanup === 'function') {
+			cleanup()
+			delete (el as any)[RESIZE_KEY]
+		}
+	},
+
+	updated(el, binding) {
+		if (binding.value !== binding.oldValue) {
+			const cleanup = (el as any)[RESIZE_KEY]
+			if (typeof cleanup === 'function') {
+				cleanup()
+				delete (el as any)[RESIZE_KEY]
+			}
+			initResize(el, binding)
+		}
+	}
+}

package/src/styles/buttons.css

@@ -1,132 +1,140 @@
 .bgl_btn,
 .bgl_flatBtn,
 .bgl_btn-icon {
-	font-family: inherit;
-	white-space: nowrap;
-	cursor: pointer;
-	box-sizing: border-box;
-	user-select: none;
-	border: none;
-	transition: var(--bgl-transition);
-	border-radius: var(--btn-border-radius);
-	line-height: var(--btn-height);
-	font-size: var(--input-font-size);
-	display: inline-block;
-	height: var(--btn-height);
-	padding: 0;
+    font-family: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+    border: none;
+    transition: var(--bgl-transition);
+    border-radius: var(--btn-border-radius);
+    line-height: var(--btn-height);
+    font-size: var(--input-font-size);
+    display: inline-block;
+    height: var(--btn-height);
+    padding: 0;
 }
 
 .btn-close {
-	margin-top: -20px;
-	margin-inline-end: -20px;
-	margin-inline-start: auto;
-	margin-bottom: 15px;
-	transition: var(--bgl-transition);
-	height: 30px;
-	width: 30px;
-	opacity: 0.6;
-	cursor: pointer;
-	border-radius: 100%;
-	outline: 2px solid transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    margin-top: -20px;
+    margin-inline-end: -20px;
+    margin-inline-start: auto;
+    margin-bottom: 15px;
+    transition: var(--bgl-transition);
+    height: 30px;
+    width: 30px;
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: 100%;
+    outline: 2px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .btn-close:hover {
-	background: var(--bgl-gray-light);
-	opacity: 1;
+    background: var(--bgl-gray-light);
+    opacity: 1;
 }
 
 .btn-close:active {
-	background: var(--bgl-gray);
+    background: var(--bgl-gray);
 }
 
 .btn-close::before {
-	content: 'close';
-	font-family: 'Material Symbols Outlined', serif;
+    content: 'close';
+    font-family: 'Material Symbols Outlined', serif;
 }
 
 .bgl_btn.thin {
-	height: calc(var(--btn-height) * 0.7);
-	line-height: calc(var(--btn-height) * 0.7);
+    height: calc(var(--btn-height) * 0.7);
+    line-height: calc(var(--btn-height) * 0.7);
 }
 
 .hover {
-	cursor: pointer;
-	transition: all 400ms ease;
+    cursor: pointer;
+    transition: all 400ms ease;
 }
 
 .hover:hover {
-	filter: brightness(90%);
+    filter: brightness(90%);
 }
 
 .hover:active {
-	filter: brightness(80%);
+    filter: brightness(80%);
 }
 
 .border {
-	border: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
 }
 
 .border-primary {
-	border: 1px solid var(--bgl-primary);
+    border: 1px solid var(--bgl-primary);
+}
+
+.outline {
+    outline: 1px solid var(--border-color);
+}
+
+.outline-primary {
+    outline: 1px solid var(--bgl-primary);
 }
 
 .rotate-270 {
-	transform: rotate(270deg);
+    transform: rotate(270deg);
 }
 
 .rotate-180 {
-	transform: rotate(180deg);
+    transform: rotate(180deg);
 }
 
 .rotate-90 {
-	transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 
 .rotate-0 {
-	transform: rotate(0deg);
+    transform: rotate(0deg);
 }
 
 @media screen and (max-width: 910px) {
-	.bgl_btn {
-		padding: 0 20px;
-	}
+    .bgl_btn {
+        padding: 0 20px;
+    }
 
-	.m_border {
-		border: 1px solid var(--border-color);
-	}
+    .m_border {
+        border: 1px solid var(--border-color);
+    }
 
-	.m_rotate-270 {
-		transform: rotate(270deg);
-	}
+    .m_rotate-270 {
+        transform: rotate(270deg);
+    }
 
-	.m_rotate-180 {
-		transform: rotate(180deg);
-	}
+    .m_rotate-180 {
+        transform: rotate(180deg);
+    }
 
-	.m_rotate-90 {
-		transform: rotate(90deg);
-	}
+    .m_rotate-90 {
+        transform: rotate(90deg);
+    }
 
-	.m_rotate-0 {
-		transform: rotate(0deg);
-	}
+    .m_rotate-0 {
+        transform: rotate(0deg);
+    }
 }
 
 .ripple {
-	position: absolute;
-	border-radius: 50%;
-	transform: scale(0);
-	background: rgba(0, 0, 0, 0.3);
-	pointer-events: none;
-	animation: rippleEffect 0.6s ease-out;
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    background: rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    animation: rippleEffect 0.6s ease-out;
 }
 
 @keyframes rippleEffect {
-	to {
-		transform: scale(4);
-		opacity: 0;
-	}
-}
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}

package/src/styles/layout.css

@@ -55,6 +55,27 @@
     aspect-ratio: 1;
 }
 
+.vertical-align-middle,
+.vertical-middle {
+    vertical-align: middle;
+}
+
+.vertical-align-top,
+.vertical-top {
+    vertical-align: top;
+}
+
+.vertical-align-bottom,
+.vertical-bottom {
+    vertical-align: bottom;
+}
+
+.vertical-align-baseline,
+.vertical-baseline {
+    vertical-align: baseline;
+}
+
+
 .flex-center {
     justify-content: center;
     align-items: center;
@@ -5380,6 +5401,10 @@
     justify-content: space-between;
 }
 
+.space-evenly {
+    justify-content: space-evenly;
+}
+
 .label {
     display: block;
     font-size: var(--label-font-size);

package/src/styles/mobilLayout.css

@@ -80,6 +80,27 @@
         aspect-ratio: 1;
     }
 
+    .m_vertical-align-middle,
+    .m_vertical-middle {
+        vertical-align: middle;
+    }
+
+    .m_vertical-align-top,
+    .m_vertical-top {
+        vertical-align: top;
+    }
+
+    .m_vertical-align-bottom,
+    .m_vertical-bottom {
+        vertical-align: bottom;
+    }
+
+    .m_vertical-align-baseline,
+    .m_vertical-baseline {
+        vertical-align: baseline;
+    }
+
+
     .m_flex-center {
         justify-items: center;
         align-items: center;
@@ -4635,6 +4656,10 @@
         justify-content: space-between;
     }
 
+    .m_space-evenly {
+        justify-content: space-evenly;
+    }
+
     .m_label {
         display: block;
         font-size: var(--label-font-size);

package/src/styles/text.css

@@ -258,6 +258,46 @@
     font-weight: 900;
 }
 
+.line-height-0 {
+    line-height: 0;
+}
+
+.line-height-01 {
+    line-height: 0.1;
+}
+
+.line-height-02 {
+    line-height: 0.2;
+}
+
+.line-height-03 {
+    line-height: 0.3;
+}
+
+.line-height-04 {
+    line-height: 0.4;
+}
+
+.line-height-05 {
+    line-height: 0.5;
+}
+
+.line-height-06 {
+    line-height: 0.6;
+}
+
+.line-height-07 {
+    line-height: 0.7;
+}
+
+.line-height-08 {
+    line-height: 0.8;
+}
+
+.line-height-09 {
+    line-height: 0.9;
+}
+
 .line-height-1 {
     line-height: 1;
 }
@@ -417,6 +457,7 @@
 }
 
 @media screen and (max-width: 910px) {
+
     .txt20,
     .txt-20 {
         font-size: 18px;
@@ -692,6 +733,46 @@
         font-weight: 900;
     }
 
+    .m_line-height-0 {
+        line-height: 0;
+    }
+
+    .m_line-height-01 {
+        line-height: 0.1;
+    }
+
+    .m_line-height-02 {
+        line-height: 0.2;
+    }
+
+    .m_line-height-03 {
+        line-height: 0.3;
+    }
+
+    .m_line-height-04 {
+        line-height: 0.4;
+    }
+
+    .m_line-height-05 {
+        line-height: 0.5;
+    }
+
+    .m_line-height-06 {
+        line-height: 0.6;
+    }
+
+    .m_line-height-07 {
+        line-height: 0.7;
+    }
+
+    .m_line-height-08 {
+        line-height: 0.8;
+    }
+
+    .m_line-height-09 {
+        line-height: 0.9;
+    }
+
     .m_line-height-1 {
         line-height: 1;
     }
@@ -833,4 +914,4 @@
     .m_capitalize {
         text-transform: capitalize;
     }
-}
+}