@bagelink/vue 1.14.13 → 1.15.0

package/src/dialog/DialogOLD.vue

@@ -1,358 +0,0 @@
-<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 { ref, computed, onMounted, watch } from 'vue'
-import { DIALOG_WIDTHS } from './dialogTypes'
-
-const props = withDefaults(defineProps<{
-	open: boolean
-	title?: string
-	width?: DialogWidth
-	position?: DialogPosition
-	dismissable?: boolean
-}>(), {
-	width: 'm',
-	position: 'center',
-	dismissable: true
-})
-
-const emit = defineEmits<{
-	'update:open': [value: boolean]
-	'close': []
-}>()
-
-const dialogRef = ref<HTMLDialogElement | null>(null)
-const isClosing = ref(false)
-
-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'
-})
-
-// Handle open/close
-watch(() => props.open, (isOpen) => {
-	if (isOpen) {
-		dialogRef.value?.showModal()
-		isClosing.value = false
-	} else {
-		closeWithAnimation()
-	}
-})
-
-onMounted(() => {
-	if (props.open) {
-		dialogRef.value?.showModal()
-	}
-})
-
-function closeWithAnimation() {
-	if (isClosing.value) return
-	isClosing.value = true
-}
-
-function onAnimationEnd() {
-	if (isClosing.value) {
-		dialogRef.value?.close()
-		isClosing.value = false
-		emit('close')
-	}
-}
-
-function onBackdropClick(e: MouseEvent) {
-	// Only close if clicking directly on the dialog backdrop (not content)
-	if (e.target === dialogRef.value && props.dismissable) {
-		emit('update:open', false)
-	}
-}
-
-function onCancel(e: Event) {
-	// Native ESC key triggers cancel event
-	if (!props.dismissable) {
-		e.preventDefault()
-		return
-	}
-	emit('update:open', false)
-}
-
-function close() {
-	emit('update:open', false)
-}
-
-defineExpose({ close })
-</script>
-
-<template>
-	<dialog
-		ref="dialogRef" :class="[positionClass, { 'is-closing': isClosing }]"
-		:style="{ '--dialog-width': widthStyle }" @click="onBackdropClick" @cancel="onCancel"
-		@animationend="onAnimationEnd"
-	>
-		<div class="dialog-content" @click.stop>
-			<!-- Header -->
-			<header v-if="title || dismissable" class="dialog-header">
-				<h2 v-if="title" class="dialog-title">
-					{{ 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>
-			</header>
-
-			<!-- Body -->
-			<div class="dialog-body">
-				<slot />
-			</div>
-
-			<!-- Footer -->
-			<footer v-if="$slots.footer" class="dialog-footer">
-				<slot name="footer" />
-			</footer>
-		</div>
-	</dialog>
-</template>
-
-<style scoped>
-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;
-}
-
-dialog::backdrop {
-	background: var(--bgl-dark-bg, rgba(0, 0, 0, 0.5));
-	opacity: 0;
-	transition: opacity 0.2s ease-out;
-}
-
-dialog[open]::backdrop {
-	opacity: 1;
-}
-
-/* Center position (default) */
-dialog.dialog-center {
-	margin: auto;
-}
-
-dialog.dialog-center[open] {
-	animation: dialog-fade-in 0.2s ease-out;
-}
-
-dialog.dialog-center.is-closing {
-	animation: dialog-fade-out 0.15s ease-in forwards;
-}
-
-@keyframes dialog-fade-in {
-	from {
-		opacity: 0;
-		transform: scale(0.95) translateY(10px);
-	}
-
-	to {
-		opacity: 1;
-		transform: scale(1) translateY(0);
-	}
-}
-
-@keyframes dialog-fade-out {
-	from {
-		opacity: 1;
-		transform: scale(1) translateY(0);
-	}
-
-	to {
-		opacity: 0;
-		transform: scale(0.95) translateY(10px);
-	}
-}
-
-/* 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.dialog-right[open] {
-	animation: dialog-slide-in-right 0.25s ease-out;
-}
-
-dialog.dialog-right.is-closing {
-	animation: dialog-slide-out-right 0.2s ease-in forwards;
-}
-
-@keyframes dialog-slide-in-right {
-	from {
-		opacity: 0;
-		transform: translateX(100%);
-	}
-
-	to {
-		opacity: 1;
-		transform: translateX(0);
-	}
-}
-
-@keyframes dialog-slide-out-right {
-	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 {
-	from {
-		opacity: 0;
-		transform: translateX(-100%);
-	}
-
-	to {
-		opacity: 1;
-		transform: translateX(0);
-	}
-}
-
-@keyframes dialog-slide-out-left {
-	from {
-		opacity: 1;
-		transform: translateX(0);
-	}
-
-	to {
-		opacity: 0;
-		transform: translateX(-100%);
-	}
-}
-
-/* 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;
-}
-
-.dialog-title {
-	margin: 0;
-	font-size: 1.125rem;
-	font-weight: 600;
-}
-
-.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;
-}
-
-.dialog-close:hover {
-	background: var(--bgl-gray-tint, #f0f0f0);
-	color: var(--bgl-text, #1a1a1a);
-}
-
-.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 */
-dialog[style*="--dialog-width: 100%"] {
-	max-width: calc(100vw - 2rem);
-}
-
-dialog.dialog-left[style*="--dialog-width: 100%"],
-dialog.dialog-right[style*="--dialog-width: 100%"] {
-	max-width: calc(100vw - 2rem);
-	width: calc(100vw - 2rem);
-}
-
-/* Mobile adjustments */
-@media screen and (max-width: 640px) {
-
-	dialog.dialog-left,
-	dialog.dialog-right {
-		margin: 0;
-		width: 100%;
-		max-width: 100%;
-		height: 100vh;
-		max-height: 100vh;
-		border-radius: 0;
-	}
-}
-</style>

package/src/plugins/modalTypes.ts

@@ -1,61 +0,0 @@
-import type { MaybeRefOrGetter } from 'vue'
-import type { BtnOptions, ThemeType } from '../types'
-import type { BglFormSchemaT } from '../types/BagelForm'
-
-export interface ModalOptions {
-	title?: string
-	dismissable?: boolean
-	side?: boolean
-	width?: string
-	actions?: BtnOptions[]
-	class?: string
-	visible?: boolean
-	zIndex?: number
-}
-
-export interface ModalConfirmOptions {
-	'title': string
-	'message': string
-	'confirmText'?: string
-	'confirmBtnColor'?: ThemeType
-	'cancelText'?: string
-	'cancelBtnColor'?: ThemeType
-	'resolve': (val: boolean) => void
-	'onUpdate:visible': () => void
-	'visible': boolean
-}
-
-export type ModalType = 'modal' | 'modalForm' | 'confirmModal'
-export type ConfirmModalUserOptions = string | {
-	title: string
-	message: string
-	confirmText?: string
-	cancelText?: string
-	confirmBtnColor?: string
-	cancelBtnColor?: string
-}
-
-export interface ModalComponentProps<T extends { [key: string]: any }> {
-	componentSlots: { [key: string]: any }
-	modalType: ModalType
-	modalOptions: ModalOptions | ModalFormOptions<T> | ModalConfirmOptions
-}
-
-export interface ModalFormComponentProps<T extends { [key: string]: any }> extends ModalComponentProps<T> {
-	modalType: 'modalForm'
-	modalOptions: ModalFormOptions<T>
-}
-
-export interface ModalFormOptions<T> extends ModalOptions {
-	'schema': MaybeRefOrGetter<BglFormSchemaT<T>>
-	'modelValue'?: T
-	'onUpdate:modelValue'?: (val: T) => void
-	'onSubmit'?: (formData: T) => any
-	'onDelete'?: (formData: T) => Promise<void>
-	'onDuplicate'?: (formData: T) => Promise<void>
-	'submitText'?: string
-	'cancelText'?: string
-	'deleteText'?: string
-	'duplicateText'?: string
-	'onError'?: (err: any) => void
-}

package/src/plugins/useModal.ts

@@ -1,225 +0,0 @@
-import type { App, InjectionKey, Plugin } from 'vue'
-import type { ComponentProps } from 'vue-component-type-helpers'
-import type {
-	ModalComponentProps,
-	ModalFormComponentProps,
-	ModalFormOptions,
-	ModalOptions,
-	ModalType,
-	ConfirmModalUserOptions,
-	ModalConfirmOptions
-} from './modalTypes'
-import { createApp, defineComponent, h, inject, reactive, shallowReactive } from 'vue'
-import { Modal, ModalConfirm, ModalForm } from '../components'
-
-export interface ModalApi {
-	showModal: <T extends { [key: string]: any }>(
-		options: ModalOptions,
-		slots?: { [key: string]: any }
-	) => ModalComponentProps<T> | undefined
-	showModalForm: <T extends { [key: string]: any }>(
-		options: ModalFormOptions<T>,
-		slots?: { [key: string]: any }
-	) => ModalFormComponentProps<T> | undefined
-	hideModal: (index?: number) => void
-	confirmModal: (options: ConfirmModalUserOptions) => Promise<boolean>
-	hideAllModals: () => void
-}
-
-export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal')
-
-// Global singleton instance as fallback (created on first plugin install)
-let globalModalApi: ModalApi | null = null
-
-export function useModal(): ModalApi {
-	const modalApi = inject(ModalSymbol, null)
-	if (!modalApi) {
-		// Fallback to global singleton if injection fails
-		if (globalModalApi) {
-			return globalModalApi
-		}
-		throw new Error('Modal API not provided. Make sure ModalPlugin is installed via app.use(ModalPlugin)')
-	}
-	return modalApi
-}
-
-export const ModalPlugin: Plugin = {
-	install: (app: App) => {
-		const BASE_Z_INDEX = 1000
-		const modalStack = reactive<ModalComponentProps<object>[]>([])
-
-		const hideModal = (index?: number) => {
-			if (index === undefined || index >= modalStack.length - 1) {
-				// Close top modal
-				modalStack.splice(modalStack.length - 1, 1)
-			} else {
-				modalStack.splice(index, 1)
-			}
-		}
-
-		const hideAllModals = () => {
-			modalStack.splice(0, modalStack.length)
-		}
-
-		const confirmModal = (options: ConfirmModalUserOptions): Promise<boolean> => {
-			return new Promise((resolve) => {
-				const confirmOptions = typeof options === 'string' ? { title: '', message: options } : options
-				modalStack.push({
-					modalOptions: shallowReactive({ ...confirmOptions, resolve }),
-					modalType: 'confirmModal',
-					componentSlots: {},
-				})
-			})
-		}
-
-		const showModal = <T extends { [key: string]: any }>(
-			modalType: ModalType,
-			options: ModalOptions | ModalFormOptions<T>,
-			slots: { [key: string]: any } = {}
-		): ModalComponentProps<T> | ModalFormComponentProps<T> | undefined => {
-			// Make options reactive so updates propagate
-			const reactiveOptions = reactive(options) as ModalOptions | ModalFormOptions<T>
-
-			// Ensure visible is set for modals
-			if (!('visible' in reactiveOptions)) {
-				reactiveOptions.visible = true
-			}
-
-			const modalComponent = {
-				modalOptions: reactiveOptions,
-				modalType,
-				componentSlots: slots,
-			}
-			modalStack.push(modalComponent)
-
-			if (modalType === 'modalForm') {
-				return modalComponent as ModalFormComponentProps<T>
-			}
-			return modalComponent
-		}
-
-		const api: ModalApi = {
-			showModal: (options: ModalOptions, slots?: { [key: string]: any }) => showModal('modal', options, slots),
-
-			showModalForm: <T extends { [key: string]: any }>(
-				options: ModalFormOptions<T>,
-				slots?: { [key: string]: any }
-			) => showModal<T>('modalForm', options, slots) as ModalFormComponentProps<T>,
-
-			confirmModal: (options: ConfirmModalUserOptions) => confirmModal(options),
-
-			hideModal,
-
-			hideAllModals,
-		}
-
-		// Set global singleton on first install
-		if (!globalModalApi) {
-			globalModalApi = api
-		}
-
-		app.provide(ModalSymbol, api)
-
-		// Modal container component
-		const ModalContainerComponent = defineComponent({
-			name: 'ModalContainer',
-			setup() {
-				// Handle ESC key - only close top modal
-				const handleEscape = (e: KeyboardEvent) => {
-					if (e.key === 'Escape' && modalStack.length > 0) {
-						const topModal = modalStack[modalStack.length - 1]
-						// Check if top modal is dismissable
-						const modalOptions = topModal.modalOptions as ModalOptions
-						if (modalOptions.dismissable !== false) {
-							hideModal()
-						}
-					}
-				}
-
-				return {
-					modalStack,
-					handleEscape,
-				}
-			},
-			mounted() {
-				document.addEventListener('keydown', this.handleEscape)
-			},
-			unmounted() {
-				document.removeEventListener('keydown', this.handleEscape)
-			},
-			render() {
-				return this.modalStack.map((modal, index) => {
-					// Calculate z-index based on stack position
-					const zIndex = BASE_Z_INDEX + index * 10
-
-					if (!modal || !modal.modalOptions) {
-						console.error('[BageLink Modal] Invalid modal in stack:', modal)
-						return null
-					}
-
-					const props = {
-						...modal.modalOptions,
-						'visible': true,
-						'zIndex': zIndex,
-						'onUpdate:visible': () => { hideModal(index) },
-					}
-
-					switch (modal.modalType) {
-						case 'modalForm': {
-							const formOptions = modal.modalOptions as ModalFormOptions<any>
-							if (!formOptions.schema) {
-								console.error('[BageLink Modal] ModalForm requires a schema', modal.modalOptions)
-								return null
-							}
-							return h(ModalForm, props as ComponentProps<typeof ModalForm>, modal.componentSlots)
-						}
-						case 'confirmModal':
-							return h(ModalConfirm, props as ModalConfirmOptions, {})
-						default:
-							return h(Modal, props, modal.componentSlots)
-					}
-				})
-			},
-		})
-
-		// Register the component so users can manually add it if needed
-		app.component('ModalContainer', ModalContainerComponent)
-
-		// Auto-mount modal container to document.body
-		if (typeof document !== 'undefined' && typeof window !== 'undefined') {
-			const mountModalContainer = () => {
-				const existingContainer = document.getElementById('bagelink-modal-root')
-				if (!existingContainer) {
-					// Create mount point
-					const container = document.createElement('div')
-					container.id = 'bagelink-modal-root'
-					document.body.appendChild(container)
-
-					// Create a separate app instance for modals to avoid context issues
-					const modalApp = createApp(ModalContainerComponent)
-
-					// Share the same context/plugins
-					modalApp._context = app._context
-
-					// Mount it
-					modalApp.mount(container)
-				}
-			}
-
-			// Try to mount immediately if DOM is ready
-			if (document.body) {
-				mountModalContainer()
-			}
-
-			// Also use mixin as fallback for cases where plugin is installed before DOM ready
-			app.mixin({
-				mounted() {
-					// Only run once on the root component
-					if (this.$root === this) {
-						mountModalContainer()
-					}
-				}
-			})
-		}
-	},
-}