@bagelink/vue 1.15.558 → 1.15.565

package/package.json

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

package/src/components/Btn.vue

@@ -55,6 +55,8 @@ const props = withDefaults(
 		ripple?: boolean
 		fullWidth?: boolean
 		fullWidthMobile?: boolean
+		/** Allow the label to wrap onto multiple lines and grow the button vertically. */
+		multiline?: boolean
 		alignTxt?: 'center' | 'start' | 'end'
 		alignTxtMobile?: 'center' | 'start' | 'end'
 		onClick?: (e: MouseEvent) => void
@@ -224,6 +226,7 @@ const slots: SetupContext['slots'] = useSlots()
 			'bgl_btn_xlSize': computedSize === 'xl',
 			'bgl_btn_fullWidth': fullWidth,
 			'bgl_btn_fullWidthMobile': fullWidthMobile,
+			'bgl_btn_multiline': multiline,
 			'bgl_btn_alignStart': alignTxt === 'start',
 			'bgl_btn_alignEnd': alignTxt === 'end',
 			'bgl_btn_alignStartMobile': alignTxtMobile === 'start',
@@ -447,6 +450,32 @@ height: calc(var(--bgl-btn-height) * 1.5);
 width: calc(var(--bgl-btn-height) * 1.5);
 }
 
+.bgl_btn.bgl_btn_multiline {
+height: auto;
+min-height: var(--bgl-btn-height);
+line-height: 1.3;
+padding-block: calc(var(--bgl-btn-padding) / 4);
+white-space: normal;
+overflow-wrap: anywhere;
+}
+
+.bgl_btn.bgl_btn_multiline.thin,
+.bgl_btn.bgl_btn_multiline.bgl_btn_sSize {
+min-height: calc(var(--bgl-btn-height) * 0.7);
+}
+
+.bgl_btn.bgl_btn_multiline.bgl_btn_xsSize {
+min-height: calc(var(--bgl-btn-height) / 2);
+}
+
+.bgl_btn.bgl_btn_multiline.bgl_btn_lSize {
+min-height: calc(var(--bgl-btn-height) * 1.2);
+}
+
+.bgl_btn.bgl_btn_multiline.bgl_btn_xlSize {
+min-height: calc(var(--bgl-btn-height) * 1.5);
+}
+
 .bgl_btn_fullWidth {
 width: 100%;
 }

package/src/components/dataTable/DataTable.vue

@@ -34,7 +34,7 @@ const loading = defineModel('loading', { default: false })
 const itemHeight = defineModel('itemHeight', { default: 50 })
 /** Cell font size. Number = px; string = any CSS size (e.g. '0.875rem'). */
 const fontSize = defineModel<number | string | undefined>('fontSize', { default: undefined })
-const selectedItems = defineModel<string[]>('selectedItems', { default: [] as string[] })
+const selectedItems = defineModel<string[]>('selectedItems', { default: () => [] })
 
 const {
 	computedSchema,

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

@@ -20,7 +20,7 @@ const { shellClass, shellStyle } = useBagelInputShell(props)
 const uid = Math.random().toString(36).slice(7)
 const inputId = computed(() => props.id || uid)
 
-const checked = defineModel<T>('modelValue', { default: undefined })
+const checked = defineModel<T>('modelValue')
 
 const hasValue = computed(() => {
 	const v = checked.value

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

@@ -23,7 +23,7 @@ defineOptions({
 })
 
 const props = defineProps<{
-	modelValue: string
+	modelValue?: string | null
 	toolbarConfig?: ToolbarConfig
 	customToolbarButtons?: CustomToolbarButton[]
 	extensions?: Array<RichTextExtension | string>
@@ -61,16 +61,28 @@ const emit = defineEmits(['update:modelValue'])
 
 const { shellClass, shellStyle } = useBagelInputShell(props)
 const extensionRegistry = inject(RICH_TEXT_EXTENSION_REGISTRY_KEY, new Map())
-const hasEditorValue = computed(() => Boolean(props.modelValue?.trim()))
-const resolvedExtensions = computed(() => (props.extensions ?? []).flatMap((extension) => {
-	if (typeof extension !== 'string') return [extension]
-	const resolved = extensionRegistry.get(extension)
-	if (!resolved) {
-		console.warn(`[RichText] Unknown extension "${extension}".`)
-		return []
+const normalizedModelValue = computed(() => props.modelValue ?? '')
+const hasEditorValue = computed(() => Boolean(normalizedModelValue.value.trim()))
+const resolvedExtensions = computed(() => {
+	const active = new Map(
+		[...extensionRegistry.values()]
+			.filter(extension => extension.alwaysActive)
+			.map(extension => [extension.name, extension]),
+	)
+	for (const extension of props.extensions ?? []) {
+		if (typeof extension !== 'string') {
+			active.set(extension.name, extension)
+			continue
+		}
+		const resolved = extensionRegistry.get(extension)
+		if (!resolved) {
+			console.warn(`[RichText] Unknown extension "${extension}".`)
+			continue
+		}
+		active.set(resolved.name, resolved)
 	}
-	return [resolved]
-}))
+	return [...active.values()]
+})
 const extensionToolbarButtons = computed(() => resolvedExtensions.value.flatMap(extension => extension.toolbarButtons ?? []))
 const effectiveCustomToolbarButtons = computed(() => [
 	...(props.customToolbarButtons ?? []),
@@ -309,6 +321,7 @@ const effectiveHideArray = computed(() => {
 const showLinkModal = ref(false)
 const linkForm = ref({
 	url: '',
+	title: '',
 	openInNewTab: true
 })
 
@@ -497,7 +510,7 @@ const tablePreviewHtml = computed(() => {
 })
 
 // Initialize content from modelValue
-editor.state.content = props.modelValue
+editor.state.content = normalizedModelValue.value
 
 // Matches Hebrew, Arabic, Syriac, Thaana, Arabic Supplement, Arabic Presentation Forms
 const RTL_REGEX = /[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\uFB1D-\uFDFD\uFE70-\uFEFC]/
@@ -725,6 +738,7 @@ function openLinkModal(selection: Selection, range: Range, existingLink: HTMLAnc
 	pendingLinkData = { selection, range, existingLink }
 	linkForm.value = {
 		url: existingLink?.href || '',
+		title: existingLink?.getAttribute('title') || '',
 		openInNewTab: existingLink?.target !== '_self'
 	}
 	showLinkModal.value = true
@@ -735,7 +749,7 @@ function submitLink() {
 	if (!pendingLinkData || !linkForm.value.url) { return }
 
 	const { selection, range, existingLink } = pendingLinkData
-	const { url, openInNewTab } = linkForm.value
+	const { url, title, openInNewTab } = linkForm.value
 	const { doc } = editor.state
 
 	if (!doc) { return }
@@ -743,6 +757,11 @@ function submitLink() {
 	if (existingLink) {
 		// Update existing link
 		existingLink.href = url
+		if (title.trim()) {
+			existingLink.title = title.trim()
+		} else {
+			existingLink.removeAttribute('title')
+		}
 		existingLink.target = openInNewTab ? '_blank' : '_self'
 		if (openInNewTab) {
 			existingLink.rel = 'noopener noreferrer'
@@ -754,6 +773,9 @@ function submitLink() {
 		try {
 			const anchor = doc.createElement('a')
 			anchor.href = url
+			if (title.trim()) {
+				anchor.title = title.trim()
+			}
 			anchor.target = openInNewTab ? '_blank' : '_self'
 			if (openInNewTab) {
 				anchor.rel = 'noopener noreferrer'
@@ -2357,7 +2379,7 @@ function handleTableContextMenu(event: MouseEvent) {
 // Expose debug methods if debug mode is enabled
 const debugMethods = computed(() => editor.state.debug)
 const hasRTL = computed(() => getTextDirection(
-	props.modelValue.replace(/<[^>]*>/g, ''),
+	normalizedModelValue.value.replace(/<[^>]*>/g, ''),
 	'ltr'
 ) === 'rtl')
 
@@ -2926,6 +2948,7 @@ function setupAutoWrapping(doc: Document) {
 
 			// Populate the form with existing link data
 			linkForm.value.url = link.href
+			linkForm.value.title = link.getAttribute('title') || ''
 			linkForm.value.openInNewTab = link.target === '_blank'
 
 			// Store the link data for editing
@@ -3235,7 +3258,7 @@ async function initEditor() {
 				background: #007bff !important;
 			}
 		` // Create a complete HTML document with proper doctype and meta tags
-		const initialContent = props.modelValue || (props.placeholder ? `<p class="placeholder">${props.placeholder}</p>` : '')
+		const initialContent = normalizedModelValue.value || (props.placeholder ? `<p class="placeholder">${props.placeholder}</p>` : '')
 		const htmlContent = `
 			<!DOCTYPE html>
 			<html>
@@ -3324,7 +3347,7 @@ async function initEditor() {
 		useEditorKeyboard(doc, commands)
 
 		// Auto clear format for basic mode
-		if (props.basic && props.modelValue) {
+		if (props.basic && normalizedModelValue.value) {
 			setTimeout(() => {
 				// Clear all formatting by removing styles and replacing with plain text
 				const elements = doc.body.querySelectorAll('*')
@@ -3535,7 +3558,7 @@ watch([currentInputColor, currentTextColor, currentFontFamily, effectiveContentS
 // Reset initialization state when content changes significantly.
 // Compare incoming value against the CLEAN output (not raw DOM innerHTML) to avoid
 // false positives caused by editor chrome (table wrappers, edit buttons, etc.)
-watch(() => props.modelValue, (newValue, oldValue) => {
+watch(normalizedModelValue, (newValue, oldValue) => {
 	const cleanCurrent = editor.state.doc ? getCleanHTML(editor.state.doc ?? null) : ''
 	if (newValue !== cleanCurrent) {
 		if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
@@ -3813,7 +3836,10 @@ const imgTransform = computed({
 		</div>
 	</div>
 	<!-- Link Modal -->
-	<Dialog :open="showLinkModal" title="Add Link" width="s" @update:open="showLinkModal = $event">
+	<Dialog
+		:open="showLinkModal" :title="pendingLinkData?.existingLink ? 'Edit Link' : 'Add Link'"
+		width="s" @update:open="showLinkModal = $event"
+	>
 		<div class="flex gap-05 align-items-end">
 			<TextInput
 				v-model="linkForm.url" label="URL" type="url" placeholder="https://example.com"
@@ -3824,10 +3850,14 @@ const imgTransform = computed({
 				@click="visitLink"
 			/>
 		</div>
+		<TextInput v-model="linkForm.title" label="Title" placeholder="Optional link title" />
 		<CheckInput v-model="linkForm.openInNewTab" label="Open in new tab" type="checkbox" class="mb-2 mt-05" />
 		<template #footer>
 			<Btn value="Cancel" flat thin @click="showLinkModal = false" />
-			<Btn value="Add Link" :disabled="!isValidUrl(linkForm.url)" @click="submitLink" />
+			<Btn
+				:value="pendingLinkData?.existingLink ? 'Update Link' : 'Add Link'"
+				:disabled="!isValidUrl(linkForm.url)" @click="submitLink"
+			/>
 		</template>
 	</Dialog>
 

package/src/components/form/inputs/RichText/richTextTypes.ts

@@ -89,6 +89,8 @@ export interface CustomToolbarButton {
 export interface RichTextExtension {
 	name: string
 	label: string
+	/** Apply this extension to every RichText editor in the app without field-level opt-in. */
+	alwaysActive?: boolean
 	toolbarButtons?: CustomToolbarButton[]
 	contentStyles?: string
 }

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

@@ -28,7 +28,7 @@ onMounted(() => {
 
 <template>
 	<div
-		class="bagel-input bgl-toggle"
+		class="bagel-input bgl-toggle w-a"
 		:title
 		:class="[shellClass, { small, 'has-value': checked }]" :style="shellStyle"
 	>
@@ -99,6 +99,10 @@ outline: 1px solid var(--bgl-border-color) !important;
   box-shadow:0 1px 5px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
 }
 
+:global(.bgl-dark-mode) .bgl-toggle input::before {
+  background: var(--bgl-dm-text-muted);
+}
+
 .bgl-toggle label {
   padding-inline-start: 0.5rem;
   transition: var(--bgl-transition);

package/src/components/lightbox/Lightbox.vue

@@ -108,7 +108,7 @@ defineExpose({ open, close })
 							<embed :src="normalizeURL(item?.src)" type="application/pdf" :title="item?.name">
 						</div>
 
-						<div v-else class="lightbox-file">
+						<div v-else class="lightbox-file flex-center">
 							<div class="file-info txt-white flex m_block align-items-start gap-025">
 								<Icon class="m-0 m_none" icon="draft" :size="10" weight="12" />
 								<Icon class="m-0 none m_block m_-mb-1" icon="draft" :size="4" weight="2" />
@@ -130,11 +130,14 @@ defineExpose({ open, close })
 				</template>
 
 				<template #prev-button="{ prev }">
-					<Btn icon="arrow_back" color="black" @click="prev" />
+					<Btn  icon="arrow_back"  color="black"  :disabled="currentIndex === 0" 
+					:class="{ 'color-black-70': currentIndex === 0 }"  @click="prev"/>
 				</template>
 
 				<template #next-button="{ next }">
-					<Btn icon="arrow_forward" color="black" @click="next" />
+					<Btn icon="arrow_forward" color="black" :disabled="currentIndex === group.length - 1"
+					:class="{ 'color-black-70': currentIndex === group.length - 1 }"
+					@click="next" />
 				</template>
 			</Swiper>
 
@@ -151,6 +154,11 @@ defineExpose({ open, close })
 </template>
 
 <style>
+.bgl-lightbox-swiper .swi-prev,
+.bgl-lightbox-swiper .swi-next {
+	background: transparent;
+	padding: 0;
+}
 
 .bgl-lightbox:has(.bgl_vid) {
 width: 90vw;