@bagelink/vue 0.0.1117 → 0.0.1121

package/dist/style.css

@@ -1244,14 +1244,14 @@ pre code.hljs{
 	direction: ltr;
 }
 
-.txtInputIconStart .iconStart[data-v-f265687e] {
+.txtInputIconStart .iconStart[data-v-4a70ce50] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.textInputSpinnerWrap .spinner[data-v-f265687e] {
+.textInputSpinnerWrap .spinner[data-v-4a70ce50] {
 	color: var(--input-color);
 	position: absolute;
 	inset-inline-end: 0;
@@ -1261,18 +1261,18 @@ pre code.hljs{
 	flex-direction: column;
 	gap: 0;
 }
-.top-bgl-ctrl-num-btn[data-v-f265687e]{
+.top-bgl-ctrl-num-btn[data-v-4a70ce50]{
 	margin-top: calc(var(--input-height) / 10) !important;
 }
-.bgl-ctrl-num-btn[data-v-f265687e]{
+.bgl-ctrl-num-btn[data-v-4a70ce50]{
 	height: calc(var(--input-height) / 2.5) !important;
 	isolation: isolate;
 }
-.bgl-big-ctrl-num-btn[data-v-f265687e]{
+.bgl-big-ctrl-num-btn[data-v-4a70ce50]{
 	width: 100% !important;
 	isolation: isolate;
 }
-.bgl-number-input[data-v-f265687e]{
+.bgl-number-input[data-v-4a70ce50]{
 	padding-inline-end: 1.75rem !important;
 }
 
@@ -1435,7 +1435,7 @@ input[type="range"][data-v-25d991e5]:active::-webkit-slider-thumb {
 	background: var(--bgl-primary-light);
 }
 
-.toolbar[data-v-33dff8fa] .active {
+.toolbar[data-v-bcd681b9] .active {
 	background: var(--bgl-primary);
 	color: white;
 }
@@ -2123,12 +2123,15 @@ line-height: 1.65;
 	color: var(--bgl-green);
 }
 
-.img-web-kit[data-v-1b7f9bb3] {
+.img-web-kit[data-v-6f277b5b] {
 	max-width: 100%;
 	vertical-align: middle;
 	border: 0;
 	width: 100%;
 }
+.error-image[data-v-6f277b5b] {
+	background-color: var(--skeleton-bg);
+}
 
 .bgl_bottombar .bgl_btn-flex{
   flex-direction: column;
@@ -3336,11 +3339,11 @@ body:has(.bg-dark.is-active) {
 	border-radius: var(--card-border-radius);
 }
 
-.modal-title[data-v-7361477b] {
+.modal-title[data-v-f796c518] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-7361477b] {
+.modal-title[data-v-f796c518] {
 		margin-top: 1rem;
 }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1117",
+  "version": "0.0.1121",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Image.vue

@@ -1,83 +1,112 @@
 <script setup lang="ts">
-import { Skeleton, normalizeDimension, appendScript, normalizeURL } from '@bagelink/vue'
-import { watch } from 'vue'
+import { Skeleton, normalizeDimension, appendScript, normalizeURL, Icon } from '@bagelink/vue'
+import { watch, computed } from 'vue'
 
-declare global {
-	interface Window {
-		heic2any: any
-	}
-}
-
-const { height, width, alt = '', src, pathKey } = defineProps<{
+interface ImageProps {
 	src?: string
 	pathKey?: string
 	alt?: string
 	width?: string | number
 	height?: string | number
 	caption?: string
-}>()
+}
+
+declare global {
+	interface Window {
+		heic2any: any
+	}
+}
+
+const props = defineProps<ImageProps>()
 
 let imageSrc = $ref<string | null>(null)
+let loadingError = $ref(false)
 
-const fileBaseUrl = $computed(() => ('https://files.bagel.design').replace(/\/$/, ''))
-function pathToUrl() {
-	if (pathKey?.startsWith('static/')) return `${import.meta.env.VITE_BAGEL_BASE_URL}/${pathKey}`
+const fileBaseUrl = computed(() => 'https://files.bagel.design')
 
-	return `${fileBaseUrl}/${pathKey}`
+function getImageUrl(): string | null {
+	if (!props.src && !props.pathKey) return null
+	if (props.src) return props.src
+	if (props.pathKey?.startsWith('static/')) {
+		return `${import.meta.env.VITE_BAGEL_BASE_URL}/${props.pathKey}`
+	}
+	return `${fileBaseUrl.value}/${props.pathKey}`
+}
+
+async function getCachedImage(url: string): Promise<string | null> {
+	if (!('caches' in window)) return null
+	try {
+		const imgCache = await window.caches.open('img-cache')
+		const cachedResponse = await imgCache.match(url)
+		if (cachedResponse) {
+			return URL.createObjectURL(await cachedResponse.blob())
+		}
+	} catch (error) {
+		console.warn('Cache access error:', error)
+	}
+	return null
+}
+
+async function cacheImage(url: string, blob: Blob) {
+	if (!('caches' in window)) return
+	try {
+		const imgCache = await window.caches.open('img-cache')
+		await imgCache.put(url, new Response(blob))
+	} catch (error) {
+		console.warn('Cache write error:', error)
+	}
+}
+
+async function convertHeicImage(url: string): Promise<string> {
+	await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
+	const response = await fetch(normalizeURL(url))
+	const blob = await response.blob()
+	const convertedBlob = await window.heic2any({ blob }) as Blob
+	await cacheImage(url, convertedBlob)
+	return URL.createObjectURL(convertedBlob)
 }
 
 async function loadImage() {
-	const url = src || pathToUrl()
-	console.log(url)
+	loadingError = false
+	const url = getImageUrl()
 	if (!url) {
 		imageSrc = null
 		return
 	}
-	const ext = url.split('.').pop()?.toLowerCase().split('?').shift()
 
-	if (ext === 'heic') {
-		if (!('caches' in window)) {
-			console.warn('Caching is not available. Proceeding without cache.')
-		} else {
-			try {
-				const imgCache = await window.caches.open('img-cache')
-				const cachedResponse = await imgCache.match(url)
-				if (cachedResponse) {
-					imageSrc = URL.createObjectURL(await cachedResponse.blob())
-					return
-				}
-			} catch (error) {
-				console.warn('Error accessing cache:', error)
-			}
-		}
-		try {
-			await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
-			const response = await fetch(normalizeURL(url))
-			const blob = await response.blob()
-			const convertedBlob = await window.heic2any({ blob }) as Blob
-			imageSrc = URL.createObjectURL(convertedBlob)
-			// Only attempt to cache if the cache API is available
-			if ('caches' in window) {
-				try {
-					const imgCache = await window.caches.open('img-cache')
-					imgCache.put(url, new Response(convertedBlob))
-				} catch (cacheError) {
-					console.warn('Failed to cache the image:', cacheError)
-				}
+	try {
+		const ext = url.split('.').pop()?.toLowerCase().split('?')[0]
+
+		if (ext === 'heic') {
+			const cachedSrc = await getCachedImage(url)
+			if (cachedSrc) {
+				imageSrc = cachedSrc
+				return
 			}
-		} catch (error) {
-			console.error('Error converting HEIC file:', error)
+			imageSrc = await convertHeicImage(url)
+		} else {
+			imageSrc = url
 		}
-	} else {
-		imageSrc = url
+	} catch (error) {
+		console.error('Image loading error:', error)
+		loadingError = true
+		imageSrc = null
 	}
 }
-watch(() => [src, pathKey], loadImage, { immediate: true })
+
+watch(() => [props.src, props.pathKey], loadImage, { immediate: true })
 </script>
 
 <template>
 	<figcaption v-if="caption">
-		<img v-if="imageSrc" :src="imageSrc" v-bind="$attrs" :alt="alt" :width="normalizeDimension(width)" :height="normalizeDimension(height)">
+		<img
+			v-if="imageSrc"
+			:src="imageSrc"
+			v-bind="$attrs"
+			:alt="alt"
+			:width="normalizeDimension(width)"
+			:height="normalizeDimension(height)"
+		>
 		<Skeleton
 			v-else
 			class="img-web-kit"
@@ -85,7 +114,25 @@ watch(() => [src, pathKey], loadImage, { immediate: true })
 			:height="normalizeDimension(height)"
 		/>
 	</figcaption>
-	<img v-else-if="imageSrc" :src="imageSrc" v-bind="$attrs" :alt="alt" :width="normalizeDimension(width)" :height="normalizeDimension(height)">
+
+	<img
+		v-else-if="imageSrc"
+		:src="imageSrc"
+		v-bind="$attrs"
+		:alt="alt"
+		:width="normalizeDimension(width)"
+		:height="normalizeDimension(height)"
+	>
+	<div
+		v-else-if="loadingError"
+		class="flex-center error-image"
+		:style="{
+			width: normalizeDimension(width),
+			height: normalizeDimension(height),
+		}"
+	>
+		<Icon name="broken_image" />
+	</div>
 	<Skeleton
 		v-else
 		class="img-web-kit"
@@ -101,4 +148,7 @@ watch(() => [src, pathKey], loadImage, { immediate: true })
 	border: 0;
 	width: 100%;
 }
+.error-image {
+	background-color: var(--skeleton-bg);
+}
 </style>

package/src/components/ModalForm.vue

@@ -1,12 +1,6 @@
 <script lang="ts" setup>
-import {
-	BagelForm,
-	type BglFormSchemaFnT,
-	Btn,
-	type BtnOptions,
-	Modal,
-	useBagel,
-} from '@bagelink/vue'
+import type { BglFormSchemaFnT, BtnOptions, BagelForm } from '@bagelink/vue'
+import { Btn, Modal, useBagel, BagelForm2 } from '@bagelink/vue'
 
 const props = defineProps<{
 	side?: boolean
@@ -80,15 +74,16 @@ defineExpose({ setFormValues })
 		:visible="visible"
 		:dismissable
 		:title
-		@update:visible="($event) => emit('update:visible', $event)"
+		@update:visible="($event: boolean) => emit('update:visible', $event)"
 	>
-		<BagelForm
+		<BagelForm2 v-model="formData" :schema="computedFormSchema" @submit="runSubmit" />
+		<!-- <BagelForm
 			v-if="visible"
 			ref="form"
 			v-model="formData"
 			:schema="computedFormSchema"
 			@submit="runSubmit"
-		/>
+		/> -->
 		<template v-if="onDelete || onSubmit" #footer>
 			<div>
 				<Btn thin flat value="Cancel" @click="closeModal" />

package/src/components/form/BagelForm.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { BglFormSchemaT, BglFormSchemaFnT, Field } from '@bagelink/vue'
+import type { VNode } from 'vue'
+import { BglForm, CheckInput, DateInput, FieldArray, FileUpload, NumberInput, RichText, SelectInput, TabsNav, TextInput, ToggleInput, UploadInput } from '@bagelink/vue'
+import { h, watch } from 'vue'
+
+interface Props {
+	modelValue: Record<string, any>
+	schema?: BglFormSchemaFnT
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: () => ({}),
+	schema: undefined
+})
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: Record<string, any>): void
+	(e: 'submit', value: Record<string, any>): void
+}>()
+
+const form = $ref<HTMLFormElement>()
+let formData = $ref({ ...props.modelValue })
+let initialFormData = $ref({ ...props.modelValue })
+
+// Keep formData in sync with modelValue prop
+watch(() => props.modelValue, (newValue) => {
+	formData = { ...newValue }
+}, { immediate: true, deep: true })
+
+const resolvedSchema = $computed<BglFormSchemaT | undefined>(() => {
+	if (!props.schema) return undefined
+	return typeof props.schema === 'function' ? props.schema() : props.schema
+})
+
+const isDirty = $computed(() => {
+	const current = JSON.stringify(formData)
+	const initial = JSON.stringify(initialFormData)
+	return current !== initial
+})
+
+function getComponent(field: Field) {
+	const componentMap = {
+		text: TextInput,
+		textarea: TextInput,
+		number: NumberInput,
+		array: FieldArray,
+		select: SelectInput,
+		toggle: ToggleInput,
+		check: CheckInput,
+		richtext: RichText,
+		upload: UploadInput,
+		file: FileUpload,
+		date: DateInput,
+		tabs: TabsNav,
+		bglform: BglForm
+	}
+
+	if (field.$el === 'textarea' && !field.attrs?.multiline) {
+		field.attrs = { ...field.attrs, multiline: true }
+	}
+
+	return componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
+}
+
+function processFieldValue(fieldType: any, value: any): any {
+	if (value == null) return value
+	if (fieldType === 'select' && typeof value === 'object') return value.value
+	if (typeof value === 'object' && 'value' in value) return value.value
+	return value
+}
+
+function updateFormData(fieldId: string, value: any, fieldType?: any) {
+	formData = {
+		...formData,
+		[fieldId]: processFieldValue(fieldType, value)
+	}
+	emit('update:modelValue', formData)
+}
+
+function handleSubmit() {
+	emit('submit', formData)
+	initialFormData = { ...formData }
+}
+
+function renderSchemaField(field: Field): VNode | null {
+	const Component = getComponent(field)
+	if (!Component) return null
+
+	const { $el, vIf, 'v-if': vIf2, children, ...fieldProps } = field
+	const currentValue = field.id ? formData[field.id] : undefined
+
+	const props: Record<string, any> = {
+		...fieldProps,
+		'modelValue': processFieldValue(field.$el, currentValue),
+		'onUpdate:modelValue': (value: any) => {
+			if (!field.id) return
+			updateFormData(field.id, value, field.$el)
+			field.onUpdate?.(value, formData)
+		}
+	}
+
+	// Handle dynamic props
+	if (field.attrs) {
+		Object.entries(field.attrs).forEach(([key, value]) => {
+			props[key] = typeof value === 'function' ? value(field, formData) : value
+		})
+	}
+
+	if (field.class) {
+		props.class = typeof field.class === 'function'
+			? field.class(field, formData)
+			: field.class
+	}
+
+	const slots = field.children?.length
+		? {
+			default: () => field.children!.map(child => typeof child === 'string' ? child : renderSchemaField(child)
+			)
+		}
+		: undefined
+
+	return h(Component as any, props, slots)
+}
+
+function shouldRenderField(field: Field): boolean {
+	const condition = field.vIf ?? field['v-if']
+	if (condition === undefined) return true
+	return typeof condition === 'function'
+		? condition(formData[field.id as string], formData)
+		: !!condition
+}
+
+defineExpose({ form, isDirty })
+</script>
+
+<template>
+	<form ref="form" @submit.prevent="handleSubmit">
+		<template v-if="resolvedSchema">
+			<template v-for="(field, index) in resolvedSchema" :key="field.id || index">
+				<component
+					:is="renderSchemaField(field)"
+					v-if="shouldRenderField(field)"
+				/>
+			</template>
+		</template>
+		<slot v-else />
+		<slot name="submit" :submit="handleSubmit" :isDirty="isDirty" />
+	</form>
+</template>

package/src/components/form/index.ts

@@ -1,6 +1,6 @@
+export { default as BagelForm2 } from './BagelForm.vue'
 export { default as BglField } from './BglField.vue'
 export { default as BglForm } from './BglForm.vue'
 export { default as BagelForm } from './BglForm.vue'
-export { default as BglMultiStepForm } from './BglMultiStepForm.vue'
 export { default as FieldArray } from './FieldArray.vue'
 export * from './inputs'

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

@@ -5,7 +5,7 @@ import { watch } from 'vue'
 type NumberLayout = 'default' | 'vertical' | 'horizontal'
 
 interface NumberInputProps {
-	modelValue?: number
+	modelValue?: number | string
 	min?: number
 	max?: number
 	step?: number
@@ -43,7 +43,7 @@ const {
 
 const emit = defineEmits(['update:modelValue'])
 
-let numberValue = $ref(modelValue || 0)
+let numberValue = $ref(Number.parseFloat(`${modelValue}`) || 0)
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 
@@ -88,7 +88,7 @@ watch(() => numberValue, () => {
 
 watch(() => modelValue, (newVal) => {
 	if (newVal !== numberValue)	{
-		numberValue = newVal || 0
+		numberValue = Number.parseFloat(`${newVal}`) || 0
 	}
 }, { immediate: true })
 </script>

package/src/components/form/inputs/RichText/components/EditorToolbar.vue

@@ -35,6 +35,7 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 				v-else-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
 				:aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]"
 				class=""
+				tabindex="-1"
 				@click="runAction(action.name)"
 			/>
 			<span v-else-if="action.name === 'separator'" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>