@bagelink/vue 1.2.11 → 1.2.15

package/dist/style.css

@@ -55,62 +55,62 @@
 	text-decoration: underline;
 }
 
-.bgl_btn[data-v-b609e748] {
+.bgl_btn[data-v-99c4aa53] {
   --btn-bg: var(--bgl-primary);
   --btn-color: var(--bgl-light-text);
   --btn-flat-color: var(--bgl-text-color);
 }
-.bgl_btn-green[data-v-b609e748] {
+.bgl_btn-green[data-v-99c4aa53] {
   --btn-bg: var(--bgl-green);
   --btn-color: var(--bgl-light-text);
   --btn-flat-color: var(--bgl-green);
 }
-.bgl_btn-yellow[data-v-b609e748] {
+.bgl_btn-yellow[data-v-99c4aa53] {
   --btn-bg: var(--bgl-yellow);
   --btn-color: var(--bgl-black);
   --btn-flat-color: var(--bgl-yellow);
 }
-.bgl_btn-blue[data-v-b609e748] {
+.bgl_btn-blue[data-v-99c4aa53] {
   --btn-bg: var(--bgl-blue);
   --btn-color: var(--bgl-light-text);
   --btn-flat-color: var(--bgl-blue);
 }
-.bgl_btn-primary[data-v-b609e748] {
+.bgl_btn-primary[data-v-99c4aa53] {
   --btn-bg: var(--bgl-primary);
   --btn-color: var(--bgl-light-text);
   --btn-flat-color: var(--bgl-primary);
 }
-.bgl_btn-red[data-v-b609e748] {
+.bgl_btn-red[data-v-99c4aa53] {
   --btn-bg: var(--bgl-red);
   --btn-color: var(--bgl-light-text);
   --btn-flat-color: var(--bgl-red);
 }
-.bgl_btn-white[data-v-b609e748] {
+.bgl_btn-white[data-v-99c4aa53] {
   --btn-bg: var(--bgl-white);
   --btn-color: var(--bgl-black);
   --btn-flat-color: var(--bgl-white);
 }
-.bgl_btn-black[data-v-b609e748] {
+.bgl_btn-black[data-v-99c4aa53] {
   --btn-bg: var(--bgl-black);
   --btn-color: var(--bgl-light-text);
   --btn-flat-color: var(--bgl-black);
 }
-.bgl_btn-gray[data-v-b609e748] {
+.bgl_btn-gray[data-v-99c4aa53] {
   --btn-bg: var(--bgl-gray-light);
   --btn-color: var(--bgl-black);
   --btn-flat-color: var(--bgl-gray);
 }
-.bgl_btn-light[data-v-b609e748] {
+.bgl_btn-light[data-v-99c4aa53] {
   --btn-bg: var(--bgl-primary-light);
   --btn-color: var(--bgl-primary);
   --btn-flat-color: var(--bgl-primary-light);
 }
-.bgl_btn-gray-light[data-v-b609e748] {
+.bgl_btn-gray-light[data-v-99c4aa53] {
   --btn-bg: var(--bgl-gray-light);
   --btn-color: var(--bgl-gray);
   --btn-flat-color: var(--bgl-gray-light);
 }
-.bgl_btn[data-v-b609e748] {
+.bgl_btn[data-v-99c4aa53] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   transition: var(--bgl-transition);
@@ -118,7 +118,7 @@
   color: var(--btn-color);
   text-decoration: none;
 }
-.bgl_btn.bgl_btn-icon[data-v-b609e748] {
+.bgl_btn.bgl_btn-icon[data-v-99c4aa53] {
   padding-left: 0;
   padding-right: 0;
   height: var(--btn-height);
@@ -127,72 +127,72 @@
   font-size: 1rem;
   flex-shrink: 0;
 }
-a[data-v-b609e748] {
+a[data-v-99c4aa53] {
   text-decoration: none;
 }
-.bgl_btn-flex[data-v-b609e748] {
+.bgl_btn-flex[data-v-99c4aa53] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_btn .bgl_btn-icon[data-v-b609e748]{
+.bgl_btn .bgl_btn-icon[data-v-99c4aa53]{
   font-size: calc(var(--input-font-size) * 1.3);
 }
-.bgl_btn[data-v-b609e748]:hover,
-.bgl_btn-icon[data-v-b609e748]:hover {
+.bgl_btn[data-v-99c4aa53]:hover,
+.bgl_btn-icon[data-v-99c4aa53]:hover {
   filter: var(--bgl-hover-filter);
 }
-.bgl_btn[data-v-b609e748]:active:not(:disabled),
-.bgl_btn-icon[data-v-b609e748]:active:not(:disabled) {
+.bgl_btn[data-v-99c4aa53]:active:not(:disabled),
+.bgl_btn-icon[data-v-99c4aa53]:active:not(:disabled) {
   filter: var(--bgl-active-filter);
 }
-.bgl_btn.bgl_btn_flat[data-v-b609e748] {
+.bgl_btn.bgl_btn_flat[data-v-99c4aa53] {
   background: transparent;
   color: var(--btn-flat-color);
 }
-.bgl_btn_flat[data-v-b609e748]:hover:not(:disabled),
-.bgl_btn-icon.bgl_btn_flat[data-v-b609e748]:hover:not(:disabled) {
+.bgl_btn_flat[data-v-99c4aa53]:hover:not(:disabled),
+.bgl_btn-icon.bgl_btn_flat[data-v-99c4aa53]:hover:not(:disabled) {
   background: var(--bgl-gray-20);
 }
-.bgl_btn.bgl_btn_flat[data-v-b609e748]:active:not(:disabled),
-.bgl_btn-icon.bgl_btn_flat[data-v-b609e748]:active:not(:disabled) {
+.bgl_btn.bgl_btn_flat[data-v-99c4aa53]:active:not(:disabled),
+.bgl_btn-icon.bgl_btn_flat[data-v-99c4aa53]:active:not(:disabled) {
   background: var(--bgl-gray-40);
 }
-.bgl_btn.thin[data-v-b609e748] {
+.bgl_btn.thin[data-v-99c4aa53] {
   padding-inline: calc(var(--btn-padding) / 3);
   border-radius: calc(var(--btn-border-radius) / 1.5);
 }
-.bgl_btn.round[data-v-b609e748] {
+.bgl_btn.round[data-v-99c4aa53] {
   border-radius: 1000px;
 }
-.bgl_btn-icon.thin[data-v-b609e748] {
+.bgl_btn-icon.thin[data-v-99c4aa53] {
   height: calc(var(--btn-height) / 1.5);
   width: calc(var(--btn-height) / 1.5);
   line-height: normal;
 }
-.bgl_btn-icon.thin .bgl_btn-flex[data-v-b609e748] {
+.bgl_btn-icon.thin .bgl_btn-flex[data-v-99c4aa53] {
 	height: 100%;
 }
-[dir="rtl"] .bgl_btn-icon[data-v-b609e748]{
+[dir="rtl"] .bgl_btn-icon[data-v-99c4aa53]{
   transform: rotateY(180deg);
 }
-[dir="rtl"] .ltr .bgl_btn-icon[data-v-b609e748]{
+[dir="rtl"] .ltr .bgl_btn-icon[data-v-99c4aa53]{
   transform: rotateY(0deg);
 }
-.bgl_btn-border[data-v-b609e748], .bgl_btn-icon.bgl_btn_flat.bgl_btn-border[data-v-b609e748] {
+.bgl_btn-border[data-v-99c4aa53], .bgl_btn-icon.bgl_btn_flat.bgl_btn-border[data-v-99c4aa53] {
 	  border: 1px solid var(--btn-flat-color);
 	  background: transparent;
 	  color: var(--btn-flat-color);
 }
-.bgl_btn-border[data-v-b609e748]:hover {
+.bgl_btn-border[data-v-99c4aa53]:hover {
 	  color: var(--btn-flat-color);
 }
-.bgl_btn-border[data-v-b609e748]:active:not(:disabled) {
+.bgl_btn-border[data-v-99c4aa53]:active:not(:disabled) {
   filter: brightness(80%);
 }
-.bgl_btn[data-v-b609e748]:disabled, .bgl_btn[disabled=true][data-v-b609e748] {
+.bgl_btn[data-v-99c4aa53]:disabled, .bgl_btn[disabled=true][data-v-99c4aa53] {
   opacity: 0.7;
   filter: grayscale(0.3);
   cursor: not-allowed;
@@ -2011,7 +2011,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 }
 }
 
-.tableBoxSelect[data-v-4548b70f]::after {
+.tableBoxSelect[data-v-2f424c9c]::after {
 	content: '';
 	display: block;
 	width: calc(100% - 4px);
@@ -2019,12 +2019,12 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	border: 1px solid var(--bgl-gray);
 	background: var(--bgl-gray-light);
 }
-.borderSelect[data-v-4548b70f]::after {
+.borderSelect[data-v-2f424c9c]::after {
 	border-color: var(--bgl-primary-tint);
 	background: var(--bgl-primary-light);
 }
 
-.toolbar[data-v-9d8a6eb6] .active {
+.toolbar[data-v-7e9466dc] .active {
 	background: var(--bgl-primary);
 	color: white;
 }

package/package.json

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

package/src/components/Btn.vue

@@ -42,6 +42,7 @@ const props = withDefaults(
 )
 
 const isComponent = $computed(() => {
+	if (props.disabled) return props.is
 	if (props.to) return RouterLink
 	if (props.href) return 'a'
 	return props.is
@@ -49,8 +50,10 @@ const isComponent = $computed(() => {
 
 const bind = $computed(() => {
 	const obj: { [key: string]: any } = {}
-	if (props.to && !props.disabled) obj.to = props.to
-	else if (props.href && !props.disabled) obj.href = props.href
+	if (!props.disabled) {
+		if (props.to) obj.to = props.to
+		else if (props.href) obj.href = props.href
+	}
 	if (!props.to && !props.href) {
 		obj.role = props.role
 		obj.type = props.type

package/src/components/form/FieldArray.vue

@@ -7,7 +7,7 @@ import type {
 	BglFormSchemaFnT,
 	Field,
 } from '@bagelink/vue'
-import { BagelForm, Btn, Loading } from '@bagelink/vue'
+import { BagelForm, Btn, Loading, Icon } from '@bagelink/vue'
 import { ref, onMounted, computed, watch } from 'vue'
 
 const props = withDefaults(

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

@@ -23,10 +23,9 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 			<Dropdown v-if="action.name === 'insertTable'" placement="bottom-start" thin flat icon="table">
 				<template #default="{ hide }">
 					<GridBox
-						:gridSize="5" @select="$event => {
-							runAction('insertTable', $event);
-							($event.target as any)?.blur();
-							hide()
+						:gridSize="5" @select="(value) => {
+							runAction('insertTable', value);
+							hide();
 						}"
 					/>
 				</template>

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+const props = defineProps<{
+	gridSize?: number
+}>()
 const emit = defineEmits(['select'])
 const fb = 1
-const base = 5
+const base = props.gridSize || 5
 const hoveredRow = $ref(fb)
 const hoveredCol = $ref(fb)
 

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

@@ -7,13 +7,19 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 
 	return {
 		execute: (command: string, value?: string) => {
-			if (!state.doc) return
+			console.log(`[useCommands] Executing command: ${command}`, value ? `with value: ${value}` : '')
+
+			if (!state.doc) {
+				console.log('[useCommands] No document available, skipping command')
+				return
+			}
 
 			// Log command if debug is enabled
 			debug?.logCommand(command, value)
 
 			// Handle view state commands directly
 			if (['splitView', 'codeView', 'fullScreen'].includes(command)) {
+				console.log(`[useCommands] Handling view state command: ${command}`)
 				switch (command) {
 					case 'splitView':
 						state.isSplitView = !state.isSplitView
@@ -28,14 +34,26 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			}
 
 			// Focus the editor before executing command
-			state.doc.body.focus()
+			try {
+				state.doc.body.focus()
+				console.log('[useCommands] Editor focused')
+			} catch (e) {
+				console.error('[useCommands] Error focusing editor:', e)
+			}
 
 			// Execute the command
-			executor.execute(command, value)
+			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
 			}
 
@@ -47,6 +65,7 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 					|| 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

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

@@ -102,13 +102,15 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'fontColor', label: 'Font Color', icon: 'format_color_text' },
 	{ name: 'bgColor', label: 'Background Color', icon: 'format_color_fill' },
 	{ name: 'insertTable', label: 'Insert Table', icon: 'table' },
-	{ name: 'deleteTable', label: 'Delete Table', icon: 'table_rows' },
-	{ name: 'insertRowAbove', label: 'Insert Row Above', icon: 'table_rows' },
-	{ name: 'insertRowBelow', label: 'Insert Row Below', icon: 'table_rows' },
-	{ name: 'deleteRow', label: 'Delete Row', icon: 'table_rows' },
-	{ name: 'insertColumnLeft', label: 'Insert Column Left', icon: 'add_column_left' },
-	{ name: 'insertColumnRight', label: 'Insert Column Right', icon: 'add_column_right' },
-	{ name: 'deleteColumn', label: 'Delete Column', icon: 'view_column' },
+	{ name: 'deleteTable', label: 'Delete Table', icon: 'delete_sweep' },
+	{ name: 'mergeCells', label: 'Merge Cells', icon: 'table_chart' },
+	{ name: 'splitCells', label: 'Split Cells', icon: 'dashboard' },
+	{ name: 'addRowBefore', label: 'Insert Row Above', icon: 'add_box' },
+	{ name: 'addRowAfter', label: 'Insert Row Below', icon: 'vertical_align_bottom' },
+	{ name: 'deleteRow', label: 'Delete Row', icon: 'remove' },
+	{ name: 'insertColumnLeft', label: 'Insert Column Left', icon: 'format_indent_decrease' },
+	{ name: 'insertColumnRight', label: 'Insert Column Right', icon: 'format_indent_increase' },
+	{ name: 'deleteColumn', label: 'Delete Column', icon: 'view_week' },
 	{ name: 'separator' },
 	{ name: 'undo', label: 'Undo', icon: 'undo' },
 	{ name: 'redo', label: 'Redo', icon: 'redo' },