@bagelink/vue 1.8.71 → 1.8.76

package/src/dialog/Dialog.vue

@@ -1,15 +1,10 @@
+<!-- prettier-ignore-start -->
+<!-- eslint-disable -->
 <script setup lang="ts">
-/**
- * Dialog - Native dialog wrapper with animations
- *
- * Uses native <dialog> element for:
- * - Automatic focus trap
- * - ESC key handling
- * - Backdrop via ::backdrop
- * - Browser-managed z-index stacking
- */
 import type { DialogWidth, DialogPosition } from './dialogTypes'
+import { Btn } from '@bagelink/vue'
 import { ref, computed, onMounted, watch } from 'vue'
+
 import { DIALOG_WIDTHS } from './dialogTypes'
 
 const props = withDefaults(defineProps<{
@@ -18,10 +13,18 @@ const props = withDefaults(defineProps<{
 	width?: DialogWidth
 	position?: DialogPosition
 	dismissable?: boolean
+	flat?: boolean
+	thin?: boolean
+	centerTitle?: boolean
+	closePlacement?: 'header-end' | 'header-start' | 'overlay-start' | 'overlay-end' | 'none'
 }>(), {
 	width: 'm',
 	position: 'center',
-	dismissable: true
+	dismissable: true,
+	flat: true,
+	thin: false,
+	centerTitle: false,
+	closePlacement: 'header-end'
 })
 
 const emit = defineEmits<{
@@ -31,13 +34,14 @@ const emit = defineEmits<{
 
 const dialogRef = ref<HTMLDialogElement | null>(null)
 const isClosing = ref(false)
+const overlayButtonsVisible = ref(true)
 
 const widthStyle = computed(() => DIALOG_WIDTHS[props.width])
 
 const positionClass = computed(() => {
-	if (props.position === 'left') return 'dialog-left'
-	if (props.position === 'right') return 'dialog-right'
-	return 'dialog-center'
+	if (props.position === 'left') return 'dialog-left ms-1 me-auto mt-1 mb-1 height-100-2 m_m-0 m_h-100vh m_max-h-100vh m_radius-0'
+	if (props.position === 'right') return 'dialog-right me-1 ms-auto mt-1 mb-1 height-100-2 m_m-0 m_h-100vh m_max-h-100vh m_radius-0'
+	return 'dialog-center mx-auto'
 })
 
 // Handle open/close
@@ -45,6 +49,11 @@ watch(() => props.open, (isOpen) => {
 	if (isOpen) {
 		dialogRef.value?.showModal()
 		isClosing.value = false
+		overlayButtonsVisible.value = false
+		// Show overlay buttons after dialog animation completes
+		setTimeout(() => {
+			overlayButtonsVisible.value = true
+		}, 250)
 	} else {
 		closeWithAnimation()
 	}
@@ -86,6 +95,7 @@ function onCancel(e: Event) {
 }
 
 function close() {
+	overlayButtonsVisible.value = false
 	emit('update:open', false)
 }
 
@@ -95,243 +105,173 @@ defineExpose({ close })
 <template>
 	<dialog
 		ref="dialogRef" :class="[positionClass, { 'is-closing': isClosing }]"
-		:style="{ '--dialog-width': widthStyle }" @click="onBackdropClick" @cancel="onCancel"
+		:style="{ '--dialog-width': widthStyle }" class="border-none overflow-hidden shadow-30 p-0 testMe1" @click="onBackdropClick"
+		@cancel="onCancel"
 		@animationend="onAnimationEnd"
 	>
-		<div class="dialog-content" @click.stop>
+		<div class="grid grid-dialog h-100p max-height-100-2" @click.stop>
 			<!-- Header -->
-			<header v-if="title || dismissable" class="dialog-header">
-				<h2 v-if="title" class="dialog-title">
+			<header
+				v-if="title || dismissable" class="flex space-between flex-shrink-0 align-items-start gap-05"
+				:class="{ 'border-bottom': !flat, 'border-none': !title, 'm_ps-1': title, 'p-05 m_p-05': !title, 'ps-1-5 pe-1 py-1 ': !thin && title, 'ps-1 pe-05 py-05': thin && title }"
+			>
+				<Btn v-if="dismissable && closePlacement === 'header-start'" flat icon="close" aria-label="Close" class="dialog-close" thin @click="close" />
+
+				<h3 v-if="title" class="dialog-title m-0 txt20 semi w-100p word-break-all" :class="{ 'txt-center': centerTitle }">
 					{{ title }}
-				</h2>
-				<button v-if="dismissable" type="button" class="dialog-close" aria-label="Close" @click="close">
-					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<path d="M18 6L6 18M6 6l12 12" />
-					</svg>
-				</button>
+				</h3>
+				<div v-if="!title" class="flex-grow-1" />
+				<Btn v-if="dismissable && closePlacement === 'header-end'" flat icon="close" aria-label="Close" class="dialog-close" thin @click="close" />
 			</header>
 
 			<!-- Body -->
-			<div class="dialog-body">
+			<div class="overflow-y flex-grow-1 m_p-1" :class="{ 'px-1 py-05': thin, 'px-1-5 py-1': !thin }">
 				<slot />
 			</div>
 
 			<!-- Footer -->
-			<footer v-if="$slots.footer" class="dialog-footer">
+			<footer v-if="$slots.footer" class="flex flex-shrink-0 gap-05 m_px-05 m_py-05 justify-content-end" :class="{ 'border-top': !flat, 'px-05 py-05': thin, 'px-1-5 py-1': !thin }">
 				<slot name="footer" />
 			</footer>
 		</div>
+		<!-- Overlay close buttons -->
+		<Btn v-if="dismissable && closePlacement === 'overlay-start' && overlayButtonsVisible" icon="close" aria-label="Close" class="fixed top-1 start-1 z-999 overlay-btn" @click="close" />
+		<Btn v-if="dismissable && closePlacement === 'overlay-end' && overlayButtonsVisible" icon="close" aria-label="Close" class="fixed top-1 end-1 z-999 overlay-btn" @click="close" />
 	</dialog>
 </template>
 
 <style scoped>
+/* Base dialog styles */
 dialog {
-	border: none;
 	border-radius: var(--bgl-card-radius, 12px);
-	padding: 0;
 	max-width: var(--dialog-width);
 	width: calc(100% - 2rem);
 	max-height: calc(100vh - 2rem);
 	background: var(--bgl-popup-bg, #fff);
-	color: var(--bgl-text, #1a1a1a);
-	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-	overflow: hidden;
+	color: var(--bgl-popup-text, black);
 }
 
-dialog::backdrop {
-	background: var(--bgl-dark-bg, rgba(0, 0, 0, 0.5));
-	opacity: 0;
-	transition: opacity 0.2s ease-out;
+.grid-dialog {
+	grid-template-rows: auto 1fr auto;
 }
 
-dialog[open]::backdrop {
-	opacity: 1;
+.height-100-2 {
+	height: calc(100vh - 2rem);
 }
 
-/* Center position (default) */
-dialog.dialog-center {
-	margin: auto;
+.max-height-100-2 {
+	max-height: calc(100vh - 2rem);
 }
 
-dialog.dialog-center[open] {
-	animation: dialog-fade-in 0.2s ease-out;
+.dialog-close {
+	margin-top: 0.125rem;
 }
 
-dialog.dialog-center.is-closing {
-	animation: dialog-fade-out 0.15s ease-in forwards;
+.overlay-btn {
+	opacity: 0;
+	animation: fade-in 0.3s ease-out 0.1s forwards;
 }
 
-@keyframes dialog-fade-in {
-	from {
-		opacity: 0;
-		transform: scale(0.95) translateY(10px);
-	}
-
-	to {
-		opacity: 1;
-		transform: scale(1) translateY(0);
-	}
+/* Backdrop animations */
+dialog::backdrop {
+	background: var(--bgl-dark-bg, rgba(0, 0, 0, 0.5));
+	opacity: 0;
 }
 
-@keyframes dialog-fade-out {
-	from {
-		opacity: 1;
-		transform: scale(1) translateY(0);
-	}
+dialog[open]::backdrop {
+	animation: fade-in 0.2s ease-out forwards;
+}
 
-	to {
-		opacity: 0;
-		transform: scale(0.95) translateY(10px);
-	}
+dialog.is-closing::backdrop {
+	animation: fade-out 0.15s ease-in forwards;
 }
 
-/* Right position */
-dialog.dialog-right {
-	margin: 0;
-	margin-inline-start: auto;
-	margin-inline-end: 1rem;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	height: calc(100vh - 2rem);
-	max-height: calc(100vh - 2rem);
-	border-radius: var(--bgl-card-radius, 12px);
+/* Dialog position animations */
+dialog.dialog-center[open] {
+	animation: scale-fade-in 0.2s ease-out;
 }
 
+dialog.dialog-center.is-closing {
+	animation: scale-fade-out 0.15s ease-in forwards;
+}
 dialog.dialog-right[open] {
-	animation: dialog-slide-in-right 0.25s ease-out;
+	animation: slide-in-right 0.25s ease-out;
 }
 
 dialog.dialog-right.is-closing {
-	animation: dialog-slide-out-right 0.2s ease-in forwards;
+	animation: slide-out-right 0.2s ease-in forwards;
 }
 
-@keyframes dialog-slide-in-right {
+dialog.dialog-left[open] {
+	animation: slide-in-left 0.25s ease-out;
+}
+
+dialog.dialog-left.is-closing {
+	animation: slide-out-left 0.2s ease-in forwards;
+}
+/* Keyframes - shared and reusable */
+@keyframes fade-in {
 	from {
 		opacity: 0;
-		transform: translateX(100%);
 	}
 
 	to {
 		opacity: 1;
-		transform: translateX(0);
 	}
 }
 
-@keyframes dialog-slide-out-right {
+@keyframes fade-out {
 	from {
 		opacity: 1;
-		transform: translateX(0);
 	}
-
 	to {
 		opacity: 0;
-		transform: translateX(100%);
 	}
 }
 
-/* Left position */
-dialog.dialog-left {
-	margin: 0;
-	margin-inline-end: auto;
-	margin-inline-start: 1rem;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	height: calc(100vh - 2rem);
-	max-height: calc(100vh - 2rem);
-	border-radius: var(--bgl-card-radius, 12px);
-}
-
-dialog.dialog-left[open] {
-	animation: dialog-slide-in-left 0.25s ease-out;
-}
-
-dialog.dialog-left.is-closing {
-	animation: dialog-slide-out-left 0.2s ease-in forwards;
-}
-
-@keyframes dialog-slide-in-left {
+@keyframes scale-fade-in {
 	from {
 		opacity: 0;
-		transform: translateX(-100%);
+		transform: scale(0.95) translateY(10px);
 	}
-
 	to {
 		opacity: 1;
-		transform: translateX(0);
+		transform: scale(1) translateY(0);
 	}
 }
 
-@keyframes dialog-slide-out-left {
+@keyframes scale-fade-out {
 	from {
 		opacity: 1;
-		transform: translateX(0);
+		transform: scale(1) translateY(0);
 	}
-
 	to {
 		opacity: 0;
-		transform: translateX(-100%);
+		transform: scale(0.95) translateY(10px);
 	}
 }
 
-/* Content structure */
-.dialog-content {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	max-height: inherit;
-}
-
-.dialog-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 1rem 1.5rem;
-	border-bottom: 1px solid var(--bgl-border-color, #e5e5e5);
-	flex-shrink: 0;
+@keyframes slide-in-right {
+	from { opacity: 0; transform: translateX(100%); }
+	to { opacity: 1; transform: translateX(0); }
 }
 
-.dialog-title {
-	margin: 0;
-	font-size: 1.125rem;
-	font-weight: 600;
+@keyframes slide-out-right {
+	from { opacity: 1; transform: translateX(0); }
+	to { opacity: 0; transform: translateX(100%); }
 }
 
-.dialog-close {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 32px;
-	height: 32px;
-	border: none;
-	background: transparent;
-	border-radius: 6px;
-	cursor: pointer;
-	color: var(--bgl-text-secondary, #666);
-	transition: background 0.15s ease, color 0.15s ease;
+@keyframes slide-in-left {
+	from { opacity: 0; transform: translateX(-100%); }
+	to { opacity: 1; transform: translateX(0); }
 }
 
-.dialog-close:hover {
-	background: var(--bgl-gray-tint, #f0f0f0);
-	color: var(--bgl-text, #1a1a1a);
+@keyframes slide-out-left {
+	from { opacity: 1; transform: translateX(0); }
+	to { opacity: 0; transform: translateX(-100%); }
 }
 
-.dialog-body {
-	flex: 1;
-	padding: 1.5rem;
-	overflow-y: auto;
-}
-
-.dialog-footer {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.75rem;
-	padding: 1rem 1.5rem;
-	border-top: 1px solid var(--bgl-border-color, #e5e5e5);
-	flex-shrink: 0;
-}
-
-/* Full width */
+/* Full width adjustments */
 dialog[style*="--dialog-width: 100%"] {
 	max-width: calc(100vw - 2rem);
 }
@@ -343,16 +283,17 @@ dialog.dialog-right[style*="--dialog-width: 100%"] {
 }
 
 /* Mobile adjustments */
-@media screen and (max-width: 640px) {
+@media screen and (max-width: 910px) {
+	dialog.dialog-left .grid-dialog,
+	dialog.dialog-right .grid-dialog {
+		max-height: 100vh;
+	}
 
 	dialog.dialog-left,
 	dialog.dialog-right {
-		margin: 0;
 		width: 100%;
-		max-width: 100%;
-		height: 100vh;
-		max-height: 100vh;
-		border-radius: 0;
 	}
 }
 </style>
+<!-- prettier-ignore-end -->
+<!-- eslint-enable -->

package/src/dialog/DialogConfirm.vue

@@ -51,7 +51,7 @@ function handleClose() {
 		:open="open" :title="title" :width="width" :position="position" :dismissable="dismissable"
 		@update:open="$emit('update:open', $event)" @close="handleClose"
 	>
-		<p class="confirm-message">
+		<p>
 			{{ message }}
 		</p>
 
@@ -67,10 +67,4 @@ function handleClose() {
 </template>
 
 <style scoped>
-.confirm-message {
-	margin: 0;
-	font-size: 1rem;
-	line-height: 1.5;
-	color: var(--bgl-text-secondary, #666);
-}
 </style>

package/src/dialog/DialogForm.vue

@@ -101,7 +101,7 @@ function handleClose() {
 	>
 		<form @submit.prevent="handleSubmit">
 			<!-- Error message -->
-			<div v-if="error" class="dialog-form-error">
+			<div v-if="error" class="dialog-form-error bg-red-30 color-red radius-1 mb-1 txt14 px-1 py-075">
 				{{ error }}
 			</div>
 
@@ -113,12 +113,12 @@ function handleClose() {
 			<!-- Delete button (left side) -->
 			<Btn
 				v-if="hasDeleteHandler" color="red" flat :loading="isDeleting" :disabled="isSubmitting"
-				class="dialog-delete-btn" @click="handleDelete"
+				class="me-auto" @click="handleDelete"
 			>
 				{{ deleteText }}
 			</Btn>
 
-			<div class="dialog-footer-spacer" />
+			<div class="flex-grow-1" />
 
 			<!-- Cancel button -->
 			<Btn flat :disabled="isSubmitting || isDeleting" @click="handleCancel">
@@ -132,22 +132,3 @@ function handleClose() {
 		</template>
 	</Dialog>
 </template>
-
-<style scoped>
-.dialog-form-error {
-	background: var(--bgl-red-tint, #fee);
-	color: var(--bgl-red, #dc3545);
-	padding: 0.75rem 1rem;
-	border-radius: 6px;
-	margin-bottom: 1rem;
-	font-size: 0.875rem;
-}
-
-.dialog-footer-spacer {
-	flex: 1;
-}
-
-.dialog-delete-btn {
-	margin-inline-end: auto;
-}
-</style>