@bagelink/vue 1.8.71 → 1.8.76

package/src/dialog/DialogOLD.vue

@@ -0,0 +1,358 @@
+<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/form-flow/form-flow.ts

@@ -266,6 +266,16 @@ export const $ = {
 		return new Field('richtext', parseArgs(labelOrConfig, config))
 	},
 
+	json(
+		labelOrConfig?: string | (BaseFieldConfig & { language?: string, height?: string }),
+		config?: BaseFieldConfig & { language?: string, height?: string }
+	): FieldBuilder<Record<string, any>> {
+		const parsed = parseArgs(labelOrConfig, config)
+		// Default language to 'json' for CodeEditor
+		if (!parsed.language) parsed.language = 'json'
+		return new Field('json', parsed)
+	},
+
 	checkbox(labelOrConfig?: string | BaseFieldConfig, config?: BaseFieldConfig): FieldBuilder<boolean> {
 		return new Field('checkbox', parseArgs(labelOrConfig, config))
 	},
@@ -519,6 +529,7 @@ class Schema implements SchemaDefinition {
 			datetime: 'string',
 			textarea: 'string',
 			richtext: 'string',
+			json: 'object',
 			checkbox: 'boolean',
 			toggle: 'boolean',
 			radio: 'string',
@@ -628,6 +639,11 @@ interface JSONSchemaProperty {
 	'maximum'?: number
 	'minLength'?: number
 	'maxLength'?: number
+	'$ref'?: string
+	'anyOf'?: JSONSchemaProperty[]
+	'oneOf'?: JSONSchemaProperty[]
+	'allOf'?: JSONSchemaProperty[]
+	'additionalProperties'?: boolean | JSONSchemaProperty
 	'x-ui'?: {
 		fieldType?: string
 		placeholder?: string
@@ -650,6 +666,8 @@ interface JSONSchemaObject {
 	'title'?: string
 	'properties'?: Record<string, JSONSchemaProperty>
 	'required'?: string[]
+	'$defs'?: Record<string, JSONSchemaProperty>
+	'definitions'?: Record<string, JSONSchemaProperty>
 	'x-ui'?: {
 		condition?: string
 		class?: string
@@ -679,7 +697,7 @@ export function fromJSONSchema(jsonSchema: JSONSchemaObject): SchemaDefinition {
 
 	if (jsonSchema.properties) {
 		for (const [key, prop] of Object.entries(jsonSchema.properties)) {
-			fields[key] = createFieldFromProperty(key, prop, requiredSet.has(key))
+			fields[key] = createFieldFromProperty(key, prop, requiredSet.has(key), jsonSchema)
 		}
 	}
 
@@ -696,23 +714,101 @@ export function fromJSONSchema(jsonSchema: JSONSchemaObject): SchemaDefinition {
 	return schema
 }
 
+/**
+ * Resolve a $ref pointer to its definition
+ */
+function resolveRef(ref: string, rootSchema: JSONSchemaObject): JSONSchemaProperty | undefined {
+	// Handle local refs like "#/$defs/WaLanguage" or "#/definitions/WaLanguage"
+	const match = ref.match(/^#\/(\$defs|definitions)\/(.+)$/)
+	if (!match) return undefined
+
+	const [, defsKey, defName] = match
+	const defs = defsKey === '$defs' ? rootSchema.$defs : rootSchema.definitions
+	return defName ? defs?.[defName] : undefined
+}
+
+/**
+ * Resolve anyOf/oneOf to a primary type (ignoring null for nullable fields)
+ */
+function resolveUnionType(prop: JSONSchemaProperty, _rootSchema: JSONSchemaObject): JSONSchemaProperty {
+	const unionTypes = prop.anyOf || prop.oneOf
+	if (!unionTypes || unionTypes.length === 0) return prop
+
+	// Filter out null types to find the "real" type
+	const nonNullTypes = unionTypes.filter(t => t.type !== 'null')
+
+	if (nonNullTypes.length === 1) {
+		// Single non-null type - merge with parent prop (preserving title, default, etc.)
+		const resolved = nonNullTypes[0]
+		return {
+			...resolved,
+			'title': prop.title || resolved.title,
+			'description': prop.description || resolved.description,
+			'default': prop.default !== undefined ? prop.default : resolved.default,
+			'x-ui': { ...resolved['x-ui'], ...prop['x-ui'] },
+		}
+	}
+
+	// Multiple non-null types - try to pick the most useful one
+	// Prefer object > array > string > number > boolean
+	const typeOrder = ['object', 'array', 'string', 'number', 'integer', 'boolean']
+	const sorted = nonNullTypes.sort((a, b) => {
+		const aIdx = typeOrder.indexOf(a.type || 'string')
+		const bIdx = typeOrder.indexOf(b.type || 'string')
+		return aIdx - bIdx
+	})
+
+	const resolved = sorted[0]
+	return {
+		...resolved,
+		'title': prop.title || resolved.title,
+		'description': prop.description || resolved.description,
+		'default': prop.default !== undefined ? prop.default : resolved.default,
+		'x-ui': { ...resolved['x-ui'], ...prop['x-ui'] },
+	}
+}
+
 /**
  * Create a field builder from a JSONSchema property
  */
 function createFieldFromProperty(
 	key: string,
 	prop: JSONSchemaProperty,
-	isRequired: boolean
+	isRequired: boolean,
+	rootSchema: JSONSchemaObject
 ): FieldBuilder {
-	const xUi = prop['x-ui'] || {}
-	const fieldType = xUi.fieldType || inferFieldType(prop)
+	// Resolve $ref if present
+	let resolvedProp = prop
+	if (prop.$ref) {
+		const refDef = resolveRef(prop.$ref, rootSchema)
+		if (refDef) {
+			// Merge ref definition with property (property values take precedence)
+			resolvedProp = {
+				...refDef,
+				'type': prop.type ?? refDef.type,
+				'enum': prop.enum ?? refDef.enum,
+				'title': prop.title ?? refDef.title,
+				'description': prop.description ?? refDef.description,
+				'default': prop.default !== undefined ? prop.default : refDef.default,
+				'x-ui': { ...refDef['x-ui'], ...prop['x-ui'] },
+			}
+		}
+	}
+
+	// Resolve anyOf/oneOf
+	if (resolvedProp.anyOf || resolvedProp.oneOf) {
+		resolvedProp = resolveUnionType(resolvedProp, rootSchema)
+	}
+
+	const xUi = resolvedProp['x-ui'] || {}
+	const fieldType = xUi.fieldType || inferFieldType(resolvedProp)
 
 	// Build base config
 	const config: BaseFieldConfig & Record<string, any> = {}
 
-	if (prop.title) config.label = prop.title
-	if (prop.description) config.helpText = prop.description
-	if (prop.default !== undefined) config.default = prop.default
+	if (resolvedProp.title) config.label = resolvedProp.title
+	if (resolvedProp.description) config.helpText = resolvedProp.description
+	if (resolvedProp.default !== undefined) config.default = resolvedProp.default
 	if (isRequired) config.required = true
 
 	// UI hints from x-ui
@@ -724,10 +820,10 @@ function createFieldFromProperty(
 	if (xUi.cols) config.cols = xUi.cols
 
 	// Numeric/string constraints
-	if (prop.minimum !== undefined) config.min = prop.minimum
-	if (prop.maximum !== undefined) config.max = prop.maximum
-	if (prop.minLength !== undefined) config.min = prop.minLength
-	if (prop.maxLength !== undefined) config.max = prop.maxLength
+	if (resolvedProp.minimum !== undefined) config.min = resolvedProp.minimum
+	if (resolvedProp.maximum !== undefined) config.max = resolvedProp.maximum
+	if (resolvedProp.minLength !== undefined) config.min = resolvedProp.minLength
+	if (resolvedProp.maxLength !== undefined) config.max = resolvedProp.maxLength
 
 	// Create the appropriate field builder
 	let field: FieldBuilder
@@ -763,6 +859,9 @@ function createFieldFromProperty(
 		case 'richtext':
 			field = $.richtext(config)
 			break
+		case 'json':
+			field = $.json(config)
+			break
 		case 'checkbox':
 			field = $.checkbox(config)
 			break
@@ -770,16 +869,16 @@ function createFieldFromProperty(
 			field = $.toggle(config)
 			break
 		case 'radio':
-			field = $.radio(prop.enum || [], config)
+			field = $.radio(resolvedProp.enum || [], config)
 			break
 		case 'select':
-			field = $.select(prop.enum || [], config)
+			field = $.select(resolvedProp.enum || [], config)
 			break
 		case 'multiselect':
-			field = $.multiselect(prop.enum || [], config)
+			field = $.multiselect(resolvedProp.enum || [], config)
 			break
 		case 'array':
-			field = $.array(prop.title || key, undefined, {
+			field = $.array(resolvedProp.title || key, undefined, {
 				...config,
 				allowAdd: xUi.allowAdd,
 				allowDelete: xUi.allowDelete,
@@ -837,6 +936,7 @@ function inferFieldType(prop: JSONSchemaProperty): string {
 		case 'number':
 		case 'integer': return 'number'
 		case 'array': return 'array'
+		case 'object': return 'json' // Objects rendered with CodeEditor
 		default: return 'text'
 	}
 }

package/src/plugins/useToast.ts

@@ -1,11 +1,14 @@
 import type { App, InjectionKey, Plugin } from 'vue'
+import type { PluginOptions as ToastOptions } from 'vue-toastification'
 import { inject } from 'vue'
 import Toast, {
-	type PluginOptions as ToastOptions,
+
 	POSITION,
-	useToast as useVueToast,
+	useToast as useVueToast
 } from 'vue-toastification'
+import CustomToast from '../components/Toast.vue'
 import 'vue-toastification/dist/index.css'
+import '../styles/toast-overrides.css'
 
 export interface ToastApi {
 	success: (message: string, options?: any) => void
@@ -39,20 +42,22 @@ export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 	install: (app: App, options: BagelToastOptions = {}) => {
 		const defaultOptions: ToastOptions = {
 			position: POSITION.TOP_RIGHT,
-			timeout: 3000,
+			timeout: 5000,
 			closeOnClick: true,
 			pauseOnFocusLoss: true,
 			pauseOnHover: true,
 			draggable: true,
 			draggablePercent: 0.6,
 			showCloseButtonOnHover: false,
-			hideProgressBar: false,
-			closeButton: 'button',
-			icon: true,
+			hideProgressBar: true,
+			closeButton: false,
+			icon: false,
 			rtl: false,
 			transition: 'Vue-Toastification__fade',
 			maxToasts: 5,
 			newestOnTop: true,
+			toastClassName: 'custom-toast-wrapper',
+			bodyClassName: 'custom-toast-body',
 			...options,
 		}
 
@@ -63,23 +68,53 @@ export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 		const api: ToastApi = {
 			success: (message: string, opts?: any) => {
 				const toast = useVueToast()
-				return toast.success(message, opts)
+				return toast({
+					component: CustomToast,
+					props: {
+						message,
+						type: 'success',
+					},
+				}, opts)
 			},
 			error: (message: string, opts?: any) => {
 				const toast = useVueToast()
-				return toast.error(message, opts)
+				return toast({
+					component: CustomToast,
+					props: {
+						message,
+						type: 'error',
+					},
+				}, opts)
 			},
 			info: (message: string, opts?: any) => {
 				const toast = useVueToast()
-				return toast.info(message, opts)
+				return toast({
+					component: CustomToast,
+					props: {
+						message,
+						type: 'info',
+					},
+				}, opts)
 			},
 			warning: (message: string, opts?: any) => {
 				const toast = useVueToast()
-				return toast.warning(message, opts)
+				return toast({
+					component: CustomToast,
+					props: {
+						message,
+						type: 'warning',
+					},
+				}, opts)
 			},
 			show: (message: string, opts?: any) => {
 				const toast = useVueToast()
-				return toast(message, opts)
+				return toast({
+					component: CustomToast,
+					props: {
+						message,
+						type: 'info',
+					},
+				}, opts)
 			},
 			clear: () => {
 				const toast = useVueToast()

package/src/styles/bagel.css

@@ -9,6 +9,7 @@
 @import "colors.css";
 @import "mobileColors.css";
 @import "appearance.css";
+@import "base-colors.css";
 @import "theme.css";
 @import "dark.css";
 @import "./fonts/Ploni.css";