@bagelink/vue 1.4.109 → 1.4.115

package/src/components/form/BagelForm.vue

@@ -43,6 +43,7 @@ const isDirty = computed(() => {
 // Initialize on mount
 onMounted(() => {
 	if (props.modelValue) initialFormData.value = clone(props.modelValue)
+	applyDefaultValues()
 })
 
 // Watch for model changes
@@ -50,6 +51,29 @@ watch(() => props.modelValue, (val) => {
 	if (val !== undefined) formData.value = clone(val)
 }, { immediate: true, deep: true })
 
+function applyDefaultValues() {
+	const schema = resolvedSchema.value as unknown as Array<BaseBagelField<T, any>> | undefined
+	if (!schema) return
+
+	const walk = (nodes: any[]) => {
+		for (const node of nodes) {
+			if (!node || typeof node !== 'object') continue
+			const hasId = typeof node.id === 'string' && node.id.length > 0
+			const hasDefault = Object.prototype.hasOwnProperty.call(node, 'defaultValue') && node.defaultValue !== undefined
+			if (hasId && hasDefault) {
+				const current = getNestedValue(formData.value as any, node.id as string, undefined)
+				if (current === undefined || current === '') {
+					updateFormData({ fieldId: node.id, value: node.defaultValue })
+				}
+			}
+			if (Array.isArray(node.children) && node.children.length) walk(node.children)
+		}
+	}
+	walk(schema as any[])
+}
+
+watch(resolvedSchema, () => { applyDefaultValues() }, { deep: true })
+
 // Update form data
 function updateFormData({ fieldId, value }: { fieldId?: string, value: any }) {
 	const keys = fieldId?.split('.') || []
@@ -90,12 +114,9 @@ async function handleSubmit() {
 }
 
 // Field renderingks
-const { renderField } = useSchemaField<T, P>({
+const { renderField } = useSchemaField<T>({
 	mode: 'form',
-	getFormData: () => ({
-		...formData.value,
-		get: (path: string) => getNestedValue(formData.value, path, '')
-	}),
+	getFormData: () => formData.value,
 	onUpdateModelValue: (field, value) => {
 		if (!field.id) return
 
@@ -104,7 +125,7 @@ const { renderField } = useSchemaField<T, P>({
 	}
 })
 
-const renderSchemaField = (field: any) => renderField(field as BaseBagelField<T, P>)
+const renderSchemaField = (field: any) => renderField(field as BaseBagelField<T, Path<T>>)
 
 // Add new method to handle slot input changes
 function handleSlotInputChange(event: Event) {

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ModeType } from '../../../utils/calendar/typings'
-import { TextInput, Dropdown, fmtDate } from '@bagelink/vue'
+import { TextInput, Dropdown, formatDate } from '@bagelink/vue'
 import { onClickOutside } from '@vueuse/core'
 import { ref, onMounted } from 'vue'
 import { WEEK_START_DAY } from '../../../utils/calendar/time'
@@ -47,7 +47,7 @@ const isOpen = ref(false)
 function useFormatting() {
 	const formatDisplayDate = (date: Date | string | undefined): string => {
 		if (!date) return ''
-		return fmtDate(date, { fmt: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
+		return formatDate(date, { fmt: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
 	}
 
 	const parseUserInput = (input: string): Date | null => {

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

@@ -15,18 +15,21 @@ const props = withDefaults(
 		locale?: string
 		enableTime?: boolean
 		highlightedDates?: MaybeRefOrGetter<(string | Date)[]>
+		disabledDates?: MaybeRefOrGetter<(string | Date)[]>
+		autoSize?: boolean
 	}>(),
 	{
 		mode: () => ({ mode: 'day' }),
 		firstDayOfWeek: WEEK_START_DAY.SUNDAY,
 		locale: '',
-		enableTime: false
+		enableTime: false,
 	},
 )
 
 const emit = defineEmits(['update:modelValue'])
 
 const computedHighlightedDates = $computed(() => toValue(props.highlightedDates))
+const computedDisabledDates = $computed(() => toValue(props.disabledDates))
 
 // State
 const currentMonth = ref(new Date())
@@ -49,8 +52,24 @@ function useDateValidation() {
 		const minDate = parseDate(props.min)
 		const maxDate = parseDate(props.max)
 
+		// Check if date is in min/max range
 		if (minDate && date < minDate) return true
 		if (maxDate && date > maxDate) return true
+
+		// Check if date is in the disabled dates array
+		if (Array.isArray(computedDisabledDates) && computedDisabledDates.length > 0) {
+			const isInDisabledDates = computedDisabledDates.some((disabledDate) => {
+				const parsedDisabledDate = parseDate(disabledDate)
+				if (!parsedDisabledDate) return false
+
+				// Compare year, month, and day
+				return date.getFullYear() === parsedDisabledDate.getFullYear()
+					&& date.getMonth() === parsedDisabledDate.getMonth()
+					&& date.getDate() === parsedDisabledDate.getDate()
+			})
+			if (isInDisabledDates) return true
+		}
+
 		return false
 	}
 
@@ -309,7 +328,7 @@ function selectDate(date: Date | null) {
 </script>
 
 <template>
-	<div class="ltr flex gap-075 m_flex-wrap calendar-container justify-content-center h-100p">
+	<div class="ltr gap-075 m_flex-wrap calendar-container justify-content-center h-100p" :class="{ flex: !autoSize }">
 		<div class="calendar-section m_border-none px-05 m_p-0">
 			<div class="flex space-between pb-1">
 				<template v-if="currentView === 'days'">
@@ -332,18 +351,12 @@ function selectDate(date: Date | null) {
 			</div>
 
 			<div v-if="currentView === 'days'" class="calendar-grid grid gap-025">
-				<div
-					v-for="day in weekDays"
-					:key="day"
-					class="txt-center txt-12 opacity-6"
-				>
+				<div v-for="day in weekDays" :key="day" class="txt-center txt-12 opacity-6">
 					{{ day }}
 				</div>
 
 				<button
-					v-for="date in currentMonthDays"
-					:key="date?.toISOString()"
-					type="button"
+					v-for="date in currentMonthDays" :key="date?.toISOString()" type="button"
 					class="day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0"
 					:class="{
 						'selected': isSelected(date),
@@ -351,9 +364,7 @@ function selectDate(date: Date | null) {
 						'disabled': isDateDisabled(date),
 						'not-in-month': isNotInMonth(date),
 						'highlighted': isHighlighted(date),
-					}"
-					:disabled="isDateDisabled(date)"
-					@click="selectDate(date)"
+					}" :disabled="isDateDisabled(date)" @click="selectDate(date)"
 				>
 					{{ date?.getDate() }}
 				</button>
@@ -361,52 +372,34 @@ function selectDate(date: Date | null) {
 
 			<div v-else-if="currentView === 'months'" class="month-grid grid gap-05 p-05">
 				<Btn
-					v-for="month in months"
-					:key="month.value"
-					thin
-					:flat="month.value !== currentMonthValue.month"
-					:disabled="month.disabled"
-					:value="month.name"
-					@click="selectMonth(month.value)"
+					v-for="month in months" :key="month.value" thin :flat="month.value !== currentMonthValue.month"
+					:disabled="month.disabled" :value="month.name" @click="selectMonth(month.value)"
 				/>
 			</div>
 
 			<div v-else class="year-grid grid gap-05 p-0">
 				<Btn
-					v-for="year in years"
-					:key="year.value" thin
-					:flat="year.value !== currentMonthValue.year"
-					:disabled="year.disabled"
-					:value="year.value.toString()"
-					@click="selectYear(year.value)"
+					v-for="year in years" :key="year.value" thin :flat="year.value !== currentMonthValue.year"
+					:disabled="year.disabled" :value="year.value.toString()" @click="selectYear(year.value)"
 				/>
 			</div>
 		</div>
 
-		<div v-if="enableTime && currentView === 'days'" class="time-picker border-start flex column gap-1 w-120px px-025">
+		<div
+			v-if="enableTime && currentView === 'days'"
+			class="time-picker border-start flex column gap-1 w-120px px-025"
+		>
 			<div class="flex gap-025">
 				<NumberInput
-					center
-					:modelValue="hours"
-					:disabled="!selectedDate"
-					:min="0"
-					:max="23"
-					layout="vertical"
-					:padZero="2"
-					@update:modelValue="handleHourInput"
+					center :modelValue="hours" :disabled="!selectedDate" :min="0" :max="23" layout="vertical"
+					:padZero="2" @update:modelValue="handleHourInput"
 				/>
 				<p class="pb-075">
 					:
 				</p>
 				<NumberInput
-					center
-					:modelValue="minutes"
-					:disabled="!selectedDate"
-					:min="0"
-					:max="59"
-					:padZero="2"
-					layout="vertical"
-					@update:modelValue="handleMinuteInput"
+					center :modelValue="minutes" :disabled="!selectedDate" :min="0" :max="59" :padZero="2"
+					layout="vertical" @update:modelValue="handleMinuteInput"
 				/>
 			</div>
 		</div>
@@ -477,6 +470,7 @@ function selectDate(date: Date | null) {
 	color: var(--bgl-text-color);
 	outline: 1px solid var(--border-color);
 }
+
 .day:hover:not(.disabled).selected {
 	filter: var(--bgl-hover-filter);
 	background-color: var(--bgl-primary);
@@ -503,16 +497,16 @@ function selectDate(date: Date | null) {
 }
 
 .day.highlighted:not(.selected) {
-  background-color: var(--bgl-secondary-light, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.15));
-  font-weight: 500;
+	background-color: var(--bgl-secondary-light, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.15));
+	font-weight: 500;
 }
 
 .day.highlighted.selected {
-  /* Add a subtle ring effect for dates that are both selected and highlighted */
-  box-shadow: 0 0 0 2px var(--bgl-secondary, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.5));
+	/* Add a subtle ring effect for dates that are both selected and highlighted */
+	box-shadow: 0 0 0 2px var(--bgl-secondary, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.5));
 }
 
 .day.highlighted:not(.selected):hover {
-  background-color: var(--bgl-secondary-light-hover, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.25));
+	background-color: var(--bgl-secondary-light-hover, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.25));
 }
 </style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="ContextObjType extends { [key: string]: any }">
 import { Btn } from '@bagelink/vue'
+import { watch } from 'vue'
 
 export interface RadioOption<T> {
 	imgAlt?: string
@@ -11,15 +12,26 @@ export interface RadioOption<T> {
 	value: any
 }
 
-const props = defineProps<{
-	id?: string
-	groupName?: string
-	options: RadioOption<ContextObjType>[]
-	deletable?: boolean
-	required?: boolean
-	error?: string
-	disabled?: boolean
-}>()
+type RadioOptionsSource<T> = RadioOption<T>[] | (() => Promise<RadioOption<T>[]>)
+
+const props = withDefaults(
+	defineProps<{
+		id?: string
+		groupName?: string
+		options: RadioOptionsSource<ContextObjType>
+		deletable?: boolean
+		required?: boolean
+		error?: string
+		disabled?: boolean
+		thin?: boolean
+		flat?: boolean
+		invertedActive?: boolean
+		align?: 'start' | 'center' | 'end' | 'top' | 'bottom'
+	}>(),
+	{
+		align: 'center'
+	}
+)
 
 const emit = defineEmits(['delete', 'focus', 'blur', 'change'])
 
@@ -31,6 +43,23 @@ const name = $computed(
 	)
 )
 const selectedOption = defineModel('modelValue')
+let loadedOptions = $ref<any[]>([])
+const visibleOptions = $computed(() => Array.isArray(props.options) ? (props.options as any[]) : (loadedOptions as any[]))
+
+async function loadOptionsIfNeeded() {
+	if (typeof props.options === 'function') {
+		try {
+			loadedOptions = await props.options()
+		} catch {
+			loadedOptions = []
+		}
+	}
+}
+
+watch(() => props.options, () => {
+	loadedOptions = []
+	loadOptionsIfNeeded()
+}, { immediate: true, deep: true })
 let isFocused = $ref(false)
 
 const containerClasses = $computed(() => ({
@@ -57,60 +86,56 @@ function handleChange() {
 <template>
 	<div :class="containerClasses">
 		<label
-			v-for="(opt, index) in options"
-			:key="opt.id || `${name}-${index}`"
-			class="border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
+			v-for="(opt, index) in visibleOptions" :key="opt.id || `${name}-${index}`"
+			class="border rounded flex mb-05 active-list-item hover"
 			:for="opt.id || `${name}-${index}`"
+			:class="{ 'p-05 gap-025': thin, 'py-1 gap-075': !thin, 'bg-gray-light': !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive }"
 		>
 			<input
-				:id="opt.id || `${name}-${index}`"
-				v-model="selectedOption"
-				:disabled
-				class="radio-input-list"
-				type="radio"
-				:name
-				:value="opt.value"
-				:required="required"
-				@focus="handleFocus"
-				@blur="handleBlur"
+				:id="opt.id || `${name}-${index}`" v-model="selectedOption" :disabled class="radio-input-list"
+				type="radio" :name :value="opt.value" :required="required" @focus="handleFocus" @blur="handleBlur"
 				@change="handleChange"
+				:class="{
+	'mt-025': align === 'start' || align === 'top',
+	'mb-025': align === 'end' || align === 'bottom'
+				}"
 			>
 			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
 				<img
-					v-if="opt.imgSrc"
-					class="bg-popup shadow-light py-025 radius-05 m_w40"
-					width="60"
-					:src="opt.imgSrc"
+					v-if="opt.imgSrc" class="bg-popup shadow-light py-025 radius-05 m_w40" height="40" :src="opt.imgSrc"
 					:alt="opt.imgAlt"
 				>
 				<div class="">
-					<p v-if="opt.label" class="m-0 m_txt-14">{{ opt.label }}</p>
+					<p v-if="opt.label" class="m-0 m_txt-14 line-height-14 pb-025">{{ opt.label }}</p>
 					<p v-if="opt.subLabel" class="txt-gray txt-12 m-0">{{ opt.subLabel }}</p>
 				</div>
 				<slot name="radioItem" v-bind="opt" />
 			</div>
-			<Btn
-				v-if="deletable"
-				class="ms-auto"
-				flat thin icon="delete"
-				@click="$emit('delete', opt)"
-			/>
+			<Btn v-if="deletable" class="ms-auto" flat thin icon="delete" @click="$emit('delete', opt)" />
 		</label>
 	</div>
 </template>
 
 <style scoped>
-.radio-input-list{
+.radio-input-list {
 	width: auto;
 	transform: scale(1.4);
 	margin-inline-end: 0.6rem;
 
 }
-.active-list-item:has(:checked){
+
+.active-list-item:has(:checked) {
 	background: var(--bgl-primary-light) !important;
 	border-color: var(--bgl-primary) !important;
 	accent-color: var(--bgl-accent-color);
 }
+.invertedActive:has(:checked) {
+	background: var(--bgl-primary) !important;
+	border-color: var(--bgl-primary) !important;
+	color: var(--bgl-white);
+	accent-color: var(--bgl-white);
+
+}
 
 .has-error .active-list-item {
 	border-color: var(--bgl-red) !important;

package/src/components/form/inputs/RichText/utils/media.ts

@@ -1,4 +1,3 @@
-import type { BaseBagelField } from '@bagelink/vue'
 import type { ModalApi } from '../../../../../plugins/useModal'
 
 import type { EditorState } from '../richTextTypes'
@@ -90,7 +89,7 @@ export function insertEmbed(modal: ModalApi, state: EditorState) {
 				bglFrmUtil.numField('width', 'Width', { min: 200, placeholder: '560' }),
 				bglFrmUtil.numField('height', 'Height', { min: 200, placeholder: '315' })
 			),
-			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', value: true } as BaseBagelField<InsertImbedModalData, 'allowFullscreen'>,
+			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', attrs: { value: true } },
 		],
 		onSubmit: (data: { url: string, width?: number, height?: number, allowFullscreen?: boolean }) => {
 			if (!data.url) return