@bagelink/vue 1.4.64 → 1.4.71

package/package.json

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

package/src/components/NavBar.vue

@@ -41,7 +41,11 @@ onMounted(calcIsOpen)
 	<div :class="{ open: isOpen, closed: !isOpen }">
 		<slot name="top" :isOpen="isOpen" />
 		<div
-			class="nav-expend" role="button" aria-label="Toggle Navigation" tabindex="0" @click="toggleMenu"
+			class="nav-expend"
+			role="button"
+			aria-label="Toggle Navigation"
+			tabindex="0"
+			@click="toggleMenu"
 			@keypress.enter="toggleMenu"
 		>
 			<Icon icon="chevron_right" class="top-arrow" />
@@ -51,8 +55,12 @@ onMounted(calcIsOpen)
 			<div class="nav-scroll">
 				<div class="nav-links-wrapper">
 					<component
-						:is="link.to ? 'router-link' : 'div'" v-for="link in links" :key="link.label"
-						class="nav-button" :to="link.to" @click="link.onClick?.()"
+						:is="link.to ? 'router-link' : 'div'"
+						v-for="link in links"
+						:key="link.label"
+						class="nav-button"
+						:to="link.to"
+						@click="link.onClick?.()"
 					>
 						<Icon :icon="link.icon" />
 						<div class="tooltip">
@@ -64,8 +72,12 @@ onMounted(calcIsOpen)
 
 			<div class="bot-buttons-wrapper">
 				<component
-					:is="link.to ? 'router-link' : 'div'" v-for="link in footerLinks" :key="link.label"
-					class="nav-button" :to="link.to" @click="link.onClick?.()"
+					:is="link.to ? 'router-link' : 'div'"
+					v-for="link in footerLinks"
+					:key="link.label"
+					class="nav-button"
+					:to="link.to"
+					@click="link.onClick?.()"
 				>
 					<Icon :icon="link.icon" />
 					<div class="tooltip">

package/src/components/dataTable/DataTable.vue

@@ -121,76 +121,46 @@ const showLoading = computed(() => loading.value)
 </script>
 
 <template>
-	<div
-		class="table-list-wrap h-100"
-		v-bind="containerProps"
-		:class="{ overflowHiddenLoading: showLoading }"
-	>
+	<div class="table-list-wrap h-100" v-bind="containerProps" :class="{ overflowHiddenLoading: showLoading }">
 		<Loading v-if="showLoading" class="h100p" />
 		<div v-bind="wrapperProps" :class="{ 'pointer-events-none': showLoading }">
-			<table class="infinite-wrapper">
+			<table class="infinite-wrapper" :class="{ selecting: computedSelectedItems.length }">
 				<thead class="row first-row">
 					<th v-if="isSelectable">
-						<input
-							ref="allSelectorEl"
-							type="checkbox"
-							@click.stop
-							@change="(e) => toggleSelectAll(e)"
-						>
+						<input ref="allSelectorEl" type="checkbox" @click.stop @change="(e) => toggleSelectAll(e)">
 						<!-- @change="toggleSelectAll" -->
 					</th>
 					<th
-						v-for="field in computedSchema"
-						:key="field.id"
-						class="col"
+						v-for="field in computedSchema" :key="field.id" class="col"
 						@click="toggleSort(field?.id || '')"
 					>
 						<div class="flex">
 							{{ field.label || keyToLabel(field?.id) }}
-							<div
-								class="list-arrows"
-								:class="{ sorted: sortField === field?.id }"
-							>
-								<Icon
-									:class="{ desc: sortDirection === 'DESC' }"
-									icon="keyboard_arrow_up"
-								/>
+							<div class="list-arrows" :class="{ sorted: sortField === field?.id }">
+								<Icon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
 							</div>
 						</div>
 					</th>
 				</thead>
 				<tbody>
 					<tr
-						v-for="{ data: row } in list"
-						:key="row?.id || `row-${Math.random()}`"
+						v-for="{ data: row } in list" :key="row?.id || `row-${Math.random()}`"
 						class="row row-item position-relative"
 						:class="{ selected: row?.id && computedSelectedItems.includes(row.id) }"
-						@click="toggleSelectItem(row)"
+						@click="(event) => toggleSelectItem(row, event)"
 					>
 						<td v-if="isSelectable">
 							<div @click.stop>
-								<input
-									v-model="selectedItems"
-									type="checkbox"
-									:value="row?.id || ''"
-								>
+								<input v-model="selectedItems" type="checkbox" :value="row?.id || ''">
 							</div>
 						</td>
 						<td
-							v-for="field in computedSchema"
-							:key="`${field.id}-${row?.id || Math.random()}`"
+							v-for="field in computedSchema" :key="`${field.id}-${row?.id || Math.random()}`"
 							class="col"
 						>
-							<slot
-								v-if="field.id && slots?.[field.id]"
-								:name="field.id"
-								:row="row"
-								:field="field"
-							/>
+							<slot v-if="field.id && slots?.[field.id]" :name="field.id" :row="row" :field="field" />
 							<div v-else>
-								<component
-									:is="renderFieldForRow(field, row)"
-								/>
+								<component :is="renderFieldForRow(field, row)" />
 							</div>
 						</td>
 					</tr>
@@ -233,13 +203,19 @@ tbody tr.selected:hover {
 	border-radius: 5px;
 	object-fit: cover;
 }
+
 .col:has(img) {
 	padding-inline-end: 0.5rem;
 }
 
-.overflowHiddenLoading{
+.selecting .col {
+	user-select: none;
+}
+
+.overflowHiddenLoading {
 	overflow: hidden !important;
 }
+
 .list-arrows.sorted .desc {
 	transform: rotate(180deg);
 	display: inline-block;
@@ -313,7 +289,7 @@ th {
 	padding: 0rem 0.25rem;
 }
 
-.col > div {
+.col>div {
 	display: flex;
 	gap: 0.5rem;
 }

package/src/components/dataTable/useTableSelection.ts

@@ -9,6 +9,7 @@ export interface UseTableSelectionOptions<T> extends TableSelectionOptions<T> {
 
 export function useTableSelection<T extends { [key: string]: any }>(options: UseTableSelectionOptions<T>) {
 	const allSelectorEl = ref<HTMLInputElement>()
+	const lastSelectedIndex = ref<number | null>(null)
 	const computedSelectedItems = computed(() => options.selectedItems.value)
 	const isSelectable = computed(() => options.selectable === true && Array.isArray(options.selectedItems.value))
 	const allItems = $computed(() => options.data.value)
@@ -39,7 +40,37 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
     = !allSelected && options.selectedItems.value.length > 0
 	}
 
-	function toggleSelectItem(item: T) {
+	function toggleSelectItem(item: T, event?: MouseEvent) {
+		const currentIndex = allItems.findIndex(i => i.id === item.id)
+
+		// Handle Shift+click for range selection
+		if (event?.shiftKey && lastSelectedIndex.value !== null && currentIndex !== -1) {
+			const startIndex = Math.min(lastSelectedIndex.value, currentIndex)
+			const endIndex = Math.max(lastSelectedIndex.value, currentIndex)
+
+			// Get all items in the range
+			const rangeItems = allItems.slice(startIndex, endIndex + 1)
+			const rangeItemIds = rangeItems.map(i => i.id)
+
+			// Check if all items in range are currently selected
+			const allRangeSelected = rangeItemIds.every(id => options.selectedItems.value.includes(id)
+			)
+
+			if (allRangeSelected) {
+				// Deselect all items in range
+				options.selectedItems.value = options.selectedItems.value.filter(id => !rangeItemIds.includes(id)
+				)
+			} else {
+				// Select all items in range (add missing ones)
+				const newSelections = rangeItemIds.filter(id => !options.selectedItems.value.includes(id)
+				)
+				options.selectedItems.value.push(...newSelections)
+			}
+
+			return
+		}
+
+		// Regular single item selection logic
 		if (computedSelectedItems.value.length === 0) {
 			// Clean the item if a cleanData function is provided, otherwise use the default cleaning
 			const cleanItem = options.cleanData ? options.cleanData(item) : { ...item }
@@ -54,14 +85,19 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 			}
 
 			options.onSelect(cleanItem)
+			lastSelectedIndex.value = currentIndex
 			return
 		}
+
 		const index = computedSelectedItems.value.indexOf(item.id)
 		if (index > -1) {
 			options.selectedItems.value.splice(index, 1)
 		} else {
 			options.selectedItems.value.push(item.id)
 		}
+
+		// Update last selected index for future range selections
+		lastSelectedIndex.value = currentIndex
 	}
 
 	// Update toggleSelectAll to pass allItems to updateAllSelectorState
@@ -73,6 +109,9 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 		} else {
 			options.selectedItems.value = []
 		}
+
+		// Reset last selected index when selecting/deselecting all
+		lastSelectedIndex.value = null
 	}
 
 	return {

package/src/components/form/inputs/RichText/composables/useCommands.ts

@@ -7,8 +7,6 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 
 	return {
 		execute: (command: string, value?: string) => {
-			console.log(`[useCommands] Executing command: ${command}`, value ? `with value: ${value}` : '')
-
 			if (!state.doc) {
 				console.log('[useCommands] No document available, skipping command')
 				return
@@ -17,9 +15,8 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			// Log command if debug is enabled
 			debug?.logCommand(command, value)
 
-			// Handle view state commands directly
+			// Handle view state commands directly (these don't need DOM manipulation)
 			if (['splitView', 'codeView', 'fullScreen'].includes(command)) {
-				console.log(`[useCommands] Handling view state command: ${command}`)
 				switch (command) {
 					case 'splitView':
 						state.isSplitView = !state.isSplitView
@@ -36,41 +33,24 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			// Focus the editor before executing command
 			try {
 				state.doc.body.focus()
-				console.log('[useCommands] Editor focused')
 			} catch (e) {
 				console.error('[useCommands] Error focusing editor:', e)
 			}
 
+			// Update current selection state before command execution
+			const selection = state.doc.getSelection()
+			if (selection?.rangeCount) {
+				state.selection = selection
+				state.range = selection.getRangeAt(0).cloneRange()
+				state.rangeCount = selection.rangeCount
+			}
+
 			// Execute the command
 			try {
-				console.log('[useCommands] Executing command via executor')
 				executor.execute(command, value)
-				console.log('[useCommands] Command execution completed')
 			} catch (e) {
 				console.error('[useCommands] Error during command execution:', e)
 			}
-
-			// Update content state only if it has changed
-			const newContent = state.doc.body.innerHTML
-			if (newContent !== state.content) {
-				console.log('[useCommands] Content changed, updating state')
-				state.content = newContent
-			}
-
-			// Update selection state if needed
-			const selection = state.doc.getSelection()
-			if (selection?.rangeCount) {
-				const hasSelectionChanged = !state.selection
-					|| state.selection !== selection
-					|| state.rangeCount !== selection.rangeCount
-
-				if (hasSelectionChanged) {
-					console.log('[useCommands] Selection changed, updating state')
-					state.selection = selection
-					state.range = selection.getRangeAt(0).cloneRange()
-					state.rangeCount = selection.rangeCount
-				}
-			}
 		},
 		isActive: executor.isActive,
 		getValue: executor.getValue

package/src/components/form/inputs/RichText/composables/useEditor.ts

@@ -70,10 +70,9 @@ export function useEditor() {
 				'h5',
 				'h6',
 				'blockquote',
-				'table',
 				'p',
-				'ol',
-				'li'
+				'orderedList',
+				'unorderedList'
 			]
 			styleTypes.forEach((style) => {
 				if (state.doc && isStyleActive(style, state.doc)) {
@@ -209,44 +208,28 @@ export function useEditor() {
 				const isDirectChildOfBody = node.parentElement === doc.body
 
 				if (isEmpty || hasOnlyNbsp || (hasOnlyBr && !isDirectChildOfBody)) {
-					if (isDirectChildOfBody && !node.matches('p')) {
-						const p = doc.createElement('p')
-						p.innerHTML = '<br>'
-						node.parentNode?.replaceChild(p, node)
-					} else {
-						nodesToRemove.push(node)
-					}
+					nodesToRemove.push(node)
 				}
 				node = walker.nextNode() as Element
 			}
 			nodesToRemove.forEach((node) => { node.remove() })
 		},
 		normalizeContent: (doc: Document) => {
-			if (!doc.body.firstElementChild) {
-				const p = doc.createElement('p')
-				p.dir = doc.body.dir
-				p.innerHTML = '<br>'
-				doc.body.appendChild(p)
-			} else {
-				const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
-				const textNodes: Text[] = []
-				let node: Node | null
-				while ((node = walker.nextNode())) {
-					if (node.parentElement === doc.body) {
-						textNodes.push(node as Text)
-					}
+			// Only normalize direct text nodes to paragraphs, don't force any structure
+			const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
+			const textNodes: Text[] = []
+			let node: Node | null
+			while ((node = walker.nextNode())) {
+				if (node.parentElement === doc.body && node.textContent?.trim()) {
+					textNodes.push(node as Text)
 				}
-				textNodes.forEach((textNode) => {
-					if (textNode.textContent?.trim()) {
-						const p = doc.createElement('p')
-						p.dir = doc.body.dir
-						p.appendChild(textNode.cloneNode())
-						doc.body.replaceChild(p, textNode)
-					} else {
-						doc.body.removeChild(textNode)
-					}
-				})
 			}
+			textNodes.forEach((textNode) => {
+				const p = doc.createElement('p')
+				p.dir = doc.body.dir
+				p.appendChild(textNode.cloneNode())
+				doc.body.replaceChild(p, textNode)
+			})
 		}
 	}
 
@@ -320,8 +303,9 @@ export function useEditor() {
 		// Store state reference in document for table operations
 		(doc as any).editorState = state
 
-		// Initial setup without triggering updates
-		if (state.content) {
+		// Initial setup without triggering updates - only set content if it exists and is not just empty paragraphs
+		if (state.content && state.content.trim()
+			&& !state.content.match(/^<p(?:\s[^>]*)?>(?:<br\s*\/?>)?\s*<\/p>$/i)) {
 			const preserved = preserveIframes(state.content)
 			doc.body.innerHTML = preserved.html
 			setTimeout(() => {
@@ -333,17 +317,32 @@ export function useEditor() {
 
 		cleanup.normalizeContent(doc)
 
-		// Set initial selection at the end
-		const range = doc.createRange()
-		const selection = doc.getSelection()
-		if (selection) {
-			range.selectNodeContents(doc.body)
-			range.collapse(false)
-			selection.removeAllRanges()
-			selection.addRange(range)
-			state.range = range.cloneRange()
-			state.selection = selection
-			state.rangeCount = selection.rangeCount
+		// Set initial selection only if there's content
+		if (doc.body.firstElementChild) {
+			const range = doc.createRange()
+			const selection = doc.getSelection()
+			if (selection) {
+				range.selectNodeContents(doc.body)
+				range.collapse(false)
+				selection.removeAllRanges()
+				selection.addRange(range)
+				state.range = range.cloneRange()
+				state.selection = selection
+				state.rangeCount = selection.rangeCount
+			}
+		} else {
+			// For empty editor, set cursor at the beginning of body
+			const selection = doc.getSelection()
+			if (selection) {
+				const range = doc.createRange()
+				range.setStart(doc.body, 0)
+				range.setEnd(doc.body, 0)
+				selection.removeAllRanges()
+				selection.addRange(range)
+				state.range = range.cloneRange()
+				state.selection = selection
+				state.rangeCount = selection.rangeCount
+			}
 		}
 
 		// Setup event listeners immediately

package/src/components/form/inputs/RichText/composables/useEditorKeyboard.ts

@@ -31,7 +31,7 @@ const shortcuts: KeyboardShortcut[] = [
 export function useEditorKeyboard(doc: Document, executor: CommandExecutor): void {
 	// Handle keyboard shortcuts
 	doc.addEventListener('keydown', (e) => {
-		// Handle Enter key in lists
+		// Handle Enter key in lists and empty editor
 		if (e.key === 'Enter' && !e.shiftKey) {
 			const selection = doc.getSelection()
 			if (!selection || !selection.rangeCount) return
@@ -56,7 +56,7 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): voi
 						// If the list is now empty, remove it
 						if (!list.querySelector('li')) {
 							const p = doc.createElement('p')
-							p.innerHTML = '<br>'
+							p.innerHTML = ''
 							list.parentNode?.replaceChild(p, list)
 
 							// Set cursor in the new paragraph
@@ -69,7 +69,7 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): voi
 						// Create a new list item
 						e.preventDefault()
 						const newLi = doc.createElement('li')
-						newLi.innerHTML = '&nbsp;<br>' // Use non-breaking space with br
+						newLi.innerHTML = '' // Start with empty list item
 						listItem.insertAdjacentElement('afterend', newLi)
 
 						// Move cursor to new list item
@@ -79,6 +79,55 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): voi
 						selection.addRange(range)
 					}
 				}
+			} else {
+				// Handle Enter in regular content - create new paragraph
+				const blockElement = (container.nodeType === 3 ? container.parentElement : container as Element)?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div')
+
+				if (blockElement && range.collapsed) {
+					// If we're at the end of a block element, create a new paragraph
+					if (isAtEndOfNode(blockElement, range)) {
+						e.preventDefault()
+						const newP = doc.createElement('p')
+						newP.innerHTML = ''
+						blockElement.insertAdjacentElement('afterend', newP)
+
+						// Move cursor to new paragraph
+						range.selectNodeContents(newP)
+						range.collapse(true)
+						selection.removeAllRanges()
+						selection.addRange(range)
+					}
+				} else if (!blockElement && doc.body.textContent?.trim()) {
+					// If we're typing directly in the body and press Enter, wrap in paragraphs
+					e.preventDefault()
+
+					// Split content at cursor position
+					const textContent = doc.body.textContent || ''
+					const cursorPos = range.startOffset
+					const beforeText = textContent.substring(0, cursorPos).trim()
+					const afterText = textContent.substring(cursorPos).trim()
+
+					// Clear body
+					doc.body.innerHTML = ''
+
+					// Create first paragraph with before text
+					if (beforeText) {
+						const p1 = doc.createElement('p')
+						p1.textContent = beforeText
+						doc.body.appendChild(p1)
+					}
+
+					// Create second paragraph for after text
+					const p2 = doc.createElement('p')
+					p2.textContent = afterText
+					doc.body.appendChild(p2)
+
+					// Set cursor at beginning of second paragraph
+					range.selectNodeContents(p2)
+					range.collapse(true)
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
 			}
 		}