@bagelink/vue 0.0.1220 → 0.0.1227

package/src/components/form/BagelForm.vue

@@ -8,7 +8,7 @@ export interface BagelFormProps<_T> {
 	modelValue?: _T
 	schema?: BglFormSchemaFnT<_T>
 	tag?: 'form' | 'template'
-	onSubmit?: (data: _T) => Promise<void>
+	onSubmit?: (data: _T) => Promise<void> | void
 }
 
 const props = withDefaults(defineProps<BagelFormProps<T>>(), {
@@ -31,7 +31,7 @@ onMounted(() => {
 	}
 })
 
-const formState = ref<'success' | 'error' | 'idle'>('idle')
+const formState = ref<'success' | 'error' | 'idle' | 'submitting'>('idle')
 
 watch(() => props.modelValue, (newValue) => {
 	if (newValue !== undefined) {
@@ -60,9 +60,13 @@ function updateFormData(fieldId: string, value: any) {
 
 async function handleSubmit() {
 	try {
+		if (formState.value === 'submitting') return
+		formState.value = 'submitting'
 		await props.onSubmit?.(formData.value)
 		initialFormData.value = structuredClone(formData.value)
 		formState.value = 'success'
+		// Notify parent window of successful submission
+		window.parent.postMessage({ type: 'BAGEL_FORM_SUCCESS', data: formData.value }, '*')
 	} catch (error) {
 		formState.value = 'error'
 	}
@@ -98,7 +102,7 @@ defineExpose({ form, isDirty, validateForm })
 			</template>
 		</template>
 		<slot v-else />
-		<slot name="submit" :submit="handleSubmit" :isDirty="isDirty" :validateForm="validateForm" />
+		<slot name="submit" :submit="handleSubmit" :isDirty="isDirty" :validateForm="validateForm" :formState="formState" />
 		<slot v-if="formState === 'success'" name="success" />
 		<slot v-if="formState === 'error'" name="error" />
 	</form>

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

@@ -17,6 +17,8 @@ const props = withDefaults(
 		mode?: modeType
 		firstDayOfWeek?: WEEK_START_DAY
 		locale?: string
+		center?: boolean
+
 	}>(),
 	{
 		enableTime: false,
@@ -40,7 +42,7 @@ const time = new Time(props.firstDayOfWeek, props.locale)
 function formatDisplayDate(date: Date | string | undefined): string {
 	if (!date) return ''
 	const dateObj = typeof date === 'string' ? new Date(date) : date
-	
+
 	if (props.enableTime) {
 		return dateObj.toLocaleString(props.locale || undefined, {
 			year: 'numeric',
@@ -51,7 +53,7 @@ function formatDisplayDate(date: Date | string | undefined): string {
 			timeZone: props.timezone
 		})
 	}
-	
+
 	return dateObj.toLocaleString(props.locale || undefined, {
 		year: 'numeric',
 		month: 'short',
@@ -260,6 +262,8 @@ function isNotInMonth(date: Date) {
 						:required="required"
 						:disabled="!editMode"
 						class="date-input"
+						:class="{
+							'txt-center': center }"
 						readonly
 						@click="isOpen = true"
 					>

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

@@ -32,7 +32,7 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 
 <template>
 	<div class="datetime-wrap">
-		<div class="date-wrap">
+		<!-- <div class="date-wrap">
 			<VDatepicker
 				v-model="selectedDate"
 				inline
@@ -48,7 +48,7 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 				<template #action-buttons />
 				<template #action-preview />
 			</VDatepicker>
-		</div>
+		</div> -->
 		<div v-if="showTimeWrap" class="time-wrap">
 			<template v-for="hr in hours" :key="hr">
 				<input

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

@@ -100,7 +100,7 @@ function formatNumber(num: number) {
 
 let formattedValue = $ref('')
 function inputHandler() {
-	let numeric = formattedValue.replace(/[^\d.-]/g, '')
+	const numeric = formattedValue.replace(/[^\d.-]/g, '')
 	const emptyValue = ['', '-', '.'].includes(numeric)
 	if (numeric === '-.' || numeric.endsWith('.') || emptyValue) return
 
@@ -129,7 +129,7 @@ watch(() => modelValue, (newVal) => {
 		}"
 	>
 		<div :for="id">
-			<label v-if="label">
+			<label v-if="label" class="block">
 				{{ label }}
 			</label>
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">

package/src/components/index.ts

@@ -36,6 +36,7 @@ export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
 export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
+export { default as Spreadsheet } from './Spreadsheet/Index.vue'
 export { default as Title } from './Title.vue'
 export { default as ToolBar } from './ToolBar.vue'
 export { default as TopBar } from './TopBar.vue'

package/src/components/lightbox/Lightbox.vue

@@ -100,13 +100,13 @@ defineExpose({ open, close })
 						<Btn flat class="color-white" icon="add" :disabled="zoom === 3" @click="zoom++" />
 					</div>
 					<Btn
-						v-if="currentItem?.openFile" class="color-white" round thin flat iconEnd="arrow_outward"
+						v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat iconEnd="arrow_outward"
 						value="Open File"
 						:href="currentItem?.src"
 						target="_blank"
 					/>
 					<Btn
-						v-if="currentItem?.download" class="color-white" round thin flat icon="download"
+						v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat icon="download"
 						value="Download File"
 						:href="upgradeHeaders(currentItem?.src)"
 						download
@@ -117,11 +117,11 @@ defineExpose({ open, close })
 				<Carousel v-model:index="currentIndex" :items="1" class="bgl-lightbox-item" :class="{ zoomed: zoom > 1 }" :freeDrag="zoom === 1">
 					<template v-for="item in group" :key="item.src">
 						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom" :mouse-wheel-to-zoom="false">
-							<Image :draggable="false" :src="item?.src" alt="Preview" class="vw90 lightbox-image" />
+							<Image :draggable="false" :src="item?.src" :pathKey="item?.pathKey" alt="Preview" class="vw90 lightbox-image" />
 						</Zoomer>
 
 						<BglVideo
-							v-else-if="item?.type === 'video'"
+							v-else-if="item?.type === 'video' && item?.src"
 							:src="item?.src"
 							autoplay
 							controls
@@ -129,7 +129,7 @@ defineExpose({ open, close })
 						/>
 
 						<embed
-							v-else-if="item?.type === 'pdf'"
+							v-else-if="item?.type === 'pdf' && item?.src"
 							:src="normalizeURL(item?.src)"
 							type="application/pdf"
 							width="100%"

package/src/components/lightbox/lightbox.types.ts

@@ -1,5 +1,6 @@
 export interface LightboxItem {
-	src: string
+	src?: string
+	pathKey?: string
 	type: string
 	name: string
 	thumbnail?: string

package/src/composables/useSchemaField.ts

@@ -1,5 +1,5 @@
 import type { VNode } from 'vue'
-import type { BaseBagelField } from '../types/BagelForm'
+import type { BaseBagelField, BglFormSchemaT } from '../types/BagelForm'
 import {
 	TextInput,
 	NumberInput,
@@ -17,7 +17,7 @@ import {
 	classify,
 	keyToLabel
 } from '@bagelink/vue'
-import { h } from 'vue'
+import { h, isVNode } from 'vue'
 
 const SLOT_VALUE_COMPONENTS = new Set(['div', 'span', 'p'])
 
@@ -30,6 +30,12 @@ export interface UseSchemaFieldOptions<T> {
 	includeUnset?: boolean
 }
 
+// Add type for supported child types
+type SupportedChild<T> = BaseBagelField<T> | string | VNode
+interface SlotProps<T> { row: T, field: BaseBagelField<T> }
+type SlotFunction<T> = (props: SlotProps<T>) => any
+type SupportedSlot<T> = BglFormSchemaT<T> | VNode | SlotFunction<T>
+
 export function useSchemaField<T extends { [key: string]: any }>(options: UseSchemaFieldOptions<T>) {
 	const { mode = 'form', getRowData, onUpdate, includeUnset = false } = options
 
@@ -57,9 +63,19 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 		return typeof field.$el === 'object' ? field.$el : componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
 	}
 
+	function isSlotFunction<T>(slot: unknown): slot is SlotFunction<T> {
+		return typeof slot === 'function'
+	}
+
+	function renderChild(child: SupportedChild<T>, slots?: Record<string, SupportedSlot<T>>): any {
+		if (typeof child === 'string') return child
+		if (isVNode(child)) return child
+		return renderField(child, slots)
+	}
+
 	function renderField(
 		field: BaseBagelField<T>,
-		slots?: Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>
+		slots?: Record<string, SupportedSlot<T>>
 	): VNode | null {
 		const Component = getComponent(field)
 		if (!Component) return null
@@ -169,10 +185,7 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 		// Add default slot if there are children
 		if (children?.length) {
 			componentSlots.default = () => children
-				.map((child) => {
-					if (typeof child === 'string') return child
-					return renderField(child, slots)
-				})
+				.map(child => renderChild(child, slots))
 				.filter(Boolean) // Filter out null results from vIf
 		}
 
@@ -181,18 +194,29 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 			componentSlots.default = () => transformedValue?.toString() || ''
 		}
 
-		// Add any custom slots from the field
+		// Handle custom slots from the field
 		if (fieldSlots) {
 			Object.entries(fieldSlots).forEach(([name, slot]) => {
-				componentSlots[name] = typeof slot === 'function'
-					? () => slot(currentValue, rowData)
-					: () => slot
+				componentSlots[name] = () => {
+					if (Array.isArray(slot)) {
+						// Handle BglFormSchemaT array
+						return slot.map(schemaField => renderField(schemaField as BaseBagelField<T>, slots))
+					} else if (isVNode(slot)) {
+						// Handle VNode
+						return slot
+					} else if (typeof slot === 'function') {
+						// Handle function slot
+						const slotFn = slot as (props: SlotProps<T>) => any
+						return slotFn({ row: rowData, field })
+					}
+					return slot
+				}
 			})
 		}
 
 		// Handle custom slot content from parent
 		const slotContent = field.id && slots?.[field.id]
-			? slots[field.id]({ row: rowData, field })
+			? (slots[field.id] as SlotFunction<T>)({ row: rowData, field })
 			: undefined
 
 		if (mode === 'preview') {

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;
     }
-}
+}