@bagelink/vue 1.14.0 → 1.14.10

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/ipapi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ipapi.d.ts","sourceRoot":"","sources":["../../src/utils/ipapi.ts"],"names":[],"mappings":"AAEA,wBAAsB,KAAK,iBAQ1B"}
+{"version":3,"file":"ipapi.d.ts","sourceRoot":"","sources":["../../src/utils/ipapi.ts"],"names":[],"mappings":"AAIA,wBAAsB,KAAK,iBAmB1B"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.14.0",
+  "version": "1.14.10",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

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

@@ -3,7 +3,7 @@ import type { Ref, WritableComputedRef } from 'vue'
 
 import type { DraggableEvent } from '../../draggable/useDraggable'
 
-import { Btn, resolveI18n, useI18n } from '@bagelink/vue'
+import { Btn, resolveI18n, useI18n, pathKeyToURL } from '@bagelink/vue'
 import { computed, ref, watch, useSlots } from 'vue'
 import Draggable from '../../draggable/Draggable.vue'
 import type { BagelInputShellProps } from './bagelInputShell'
@@ -47,6 +47,7 @@ const itemLabelPrefix = computed(() => {
 })
 
 const IDENTIFIER_FIELDS = ['title', 'name', 'label', 'displayName', 'display_name', 'heading', 'caption', 'text']
+const IMAGE_FIELDS = ['image', 'thumbnail', 'avatar', 'photo', 'picture', 'profilePic', 'profile_pic', 'icon', 'logo']
 
 function getItemIdentifier(item: T): string | null {
 	if (typeof item === 'string' && item.trim().length > 0) {
@@ -63,6 +64,18 @@ function getItemIdentifier(item: T): string | null {
 	return null
 }
 
+function getItemThumbnail(item: T): string | null {
+	if (item !== null && item !== undefined && typeof item === 'object') {
+		for (const field of IMAGE_FIELDS) {
+			const val = (item as Record<string, unknown>)[field]
+			if (typeof val === 'string' && val.trim().length > 0) {
+				return val.trim()
+			}
+		}
+	}
+	return null
+}
+
 function getItemLabel(index: number) {
 	const identifier = getItemIdentifier(items.value[index])
 	return identifier != null
@@ -173,14 +186,22 @@ function getItemRef(i: number) {
 							class="grab"
 						/>
 						<div v-else />
-						<Btn
-							full-width align-txt="start" class="px-025 bg-transparent color-inherit" :ripple="false"
-							:icon="minimizedItems[i] ? 'expand_more' : 'expand_less'" @click="toggleItem(i)"
-						>
+					<Btn
+						full-width align-txt="start" class="px-025 bg-transparent color-inherit" :ripple="false"
+						:icon="minimizedItems[i] ? 'expand_more' : 'expand_less'" @click="toggleItem(i)"
+					>
+						<div class="flex align-items-center gap-05">
+							<img
+								v-if="getItemThumbnail(items[i])"
+								:src="pathKeyToURL(getItemThumbnail(items[i])!)"
+								class="array-item-thumb"
+								@error="($event.target as HTMLImageElement).style.display = 'none'"
+							>
 							<p class="ellipsis-1">
 								{{ getItemLabel(i) }}
 							</p>
-						</Btn>
+						</div>
+					</Btn>
 
 						<Btn v-if="allowDelete" v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete" thin :confirm="resolveI18n('Are you sure you want to delete this item?')" @click="deleteItem(i)" />
 					</div>
@@ -248,4 +269,11 @@ function getItemRef(i: number) {
 .simpleArray .label-text {
 	display: none;
 }
+.array-item-thumb {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	object-fit: cover;
+	flex-shrink: 0;
+}
 </style>

package/src/components/form/inputs/RichText/editor.css

@@ -4,7 +4,7 @@ body.richtext-editor-content {
     margin: 0;
     padding: 8px;
     min-height: 200px;
-    font-family: sans-serif !important;
+    font-family: var(--bgl-font);
     line-height: 1.5;
     color: inherit;
     background: transparent;
@@ -17,7 +17,7 @@ body {
     margin: 0;
     padding: 8px;
     min-height: 200px;
-    font-family: sans-serif !important;
+    font-family: var(--bgl-font);
     line-height: 1.5;
     color: inherit;
     background: transparent;

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

@@ -82,6 +82,16 @@ const currentTextColor = computed(() => {
 	return textColor
 })
 
+const currentFontFamily = computed(() => {
+	void forceUpdate.value
+	if (typeof document !== 'undefined') {
+		const computedStyle = getComputedStyle(document.documentElement)
+		const font = computedStyle.getPropertyValue('--bgl-font').trim()
+		return font || 'sans-serif'
+	}
+	return 'sans-serif'
+})
+
 // Set up theme observation with MutationObserver
 let themeObserver: MutationObserver | null = null
 
@@ -2664,17 +2674,58 @@ async function initEditor() {
 	isInitializing.value = true
 
 	try {
+		// Collect @font-face rules from parent document so the iframe can use the same fonts
+		let fontFaceRules = ''
+		try {
+			for (const sheet of Array.from(document.styleSheets)) {
+				try {
+					for (const rule of Array.from(sheet.cssRules)) {
+						if (rule instanceof CSSFontFaceRule) {
+							fontFaceRules += rule.cssText + '\n'
+						}
+					}
+				} catch { /* cross-origin stylesheet, skip */ }
+			}
+		} catch { /* styleSheets not available */ }
+
 		// Use basic embedded styles for better compatibility
 		// We copy CSS variables to the iframe so it can use them
 		const editorStylesContent = `
+			${fontFaceRules}
 			:root {
 				--input-color: ${currentInputColor.value || '#000'};
 			}
+			/* Scrollbar styles */
+			::-webkit-scrollbar {
+				width: 0.5rem;
+				height: 0.5rem;
+			}
+			::-webkit-scrollbar-track {
+				background: transparent;
+				margin: 0.25rem 0;
+			}
+			::-webkit-scrollbar-thumb {
+				background-color: rgba(0, 0, 0, 0.2);
+				border-radius: 1rem;
+				border: 1px solid transparent;
+				background-clip: content-box;
+			}
+			::-webkit-scrollbar-thumb:hover {
+				background-color: rgba(0, 0, 0, 0.35);
+			}
+			::-webkit-scrollbar-corner {
+				background: transparent;
+			}
+			html {
+				overflow-y: scroll;
+				scrollbar-width: thin;
+				scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+			}
 			body {
 				margin: 0;
 				padding: 8px;
 				min-height: 200px;
-				font-family: sans-serif !important;
+				font-family: ${currentFontFamily.value};
 				line-height: 1.5;
 				color: ${currentTextColor.value};
 				background: transparent;
@@ -3086,6 +3137,7 @@ function updateIframeColors() {
 		body {
 			color: ${currentTextColor.value} !important;
 			font-size: ${fontSize} !important;
+			font-family: ${currentFontFamily.value} !important;
 		}
 		
 		/* Ensure all text elements inherit the color and font size */
@@ -3099,7 +3151,7 @@ function updateIframeColors() {
 }
 
 // Watch for theme changes and update iframe colors
-watch([currentInputColor, currentTextColor], () => {
+watch([currentInputColor, currentTextColor, currentFontFamily], () => {
 	if (hasInitialized.value) {
 		updateIframeColors()
 	}
@@ -3223,8 +3275,8 @@ const imgTransform = computed({
 					class="content-area radius-1"
 					:style="{ height: editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight }"
 				>
-					<iframe
-						id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" srcdoc=""
+				<iframe
+					id="rich-text-iframe" ref="iframe" class="editableContent" :class="{ 'editor-ready': hasInitialized }" title="Editor" srcdoc=""
 						sandbox="allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
 						@load="initEditor" @contextmenu="handleTableContextMenu"
 					/>
@@ -3758,6 +3810,12 @@ const imgTransform = computed({
 	outline: none;
 	background: transparent;
 	font-size: var(--richtext-font-size, 16px);
+	opacity: 0;
+	transition: opacity 0.25s ease;
+}
+
+.editableContent.editor-ready {
+	opacity: 1;
 }
 
 .html-editor {

package/src/form-flow/form-flow.ts

@@ -285,8 +285,8 @@ export const $ = {
 	},
 
 	richtext(
-		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean }),
-		config?: BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean }
+		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string }),
+		config?: BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string }
 	): FieldBuilder<string> {
 		return new Field('richtext', parseArgs(labelOrConfig, config))
 	},

package/src/styles/mobilLayout.css

@@ -291,7 +291,7 @@
     }
 
     .m_place-items-center {
-        place-items: center !;
+        place-items: center !important;
     }