@bagelink/vue 1.6.2 → 1.6.4

package/package.json

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

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -7,7 +7,7 @@ import { useHighlight } from './useHighlight'
 const props = defineProps({
 	language: { type: String as PropType<Language>, default: 'html' },
 	readonly: { type: Boolean, default: false },
-	modelValue: { type: String, default: '' },
+	modelValue: { type: [String, Object] as PropType<string | Record<string, any>>, default: '' },
 	autodetect: { type: Boolean, default: true },
 	ignoreIllegals: { type: Boolean, default: true },
 	label: { type: String, default: '' },
@@ -17,13 +17,26 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['update:modelValue'])
+
+// Track whether the original modelValue was an object
+const isObjectMode = computed(() => typeof props.modelValue === 'object')
+
+// Helper to convert value to string for display
+function valueToString(value: string | Record<string, any>): string {
+	if (typeof value === 'string') return value
+	if (typeof value === 'object') {
+		return JSON.stringify(value, null, 2)
+	}
+	return ''
+}
+
 // State
-const code = ref(props.modelValue || '')
+const code = ref(valueToString(props.modelValue))
 const editorRef = ref<HTMLDivElement>()
 const { loaded, loadHighlight, highlightCode, setTheme } = useHighlight(props.theme)
 
 const maxHeight = computed(() => {
-	const h = props.height ?? '240px'
+	const h = props.height
 	return h.match(/^\d+$/) ? `${h}px` : h
 })
 
@@ -39,11 +52,24 @@ const formattedCode = computed(() => {
 function handleInput(e: Event) {
 	const target = e.target as HTMLTextAreaElement
 	code.value = target.value
-	emit('update:modelValue', code.value)
+
+	// If originally an object, try to parse and emit object
+	if (isObjectMode.value) {
+		try {
+			const parsed = JSON.parse(code.value)
+			emit('update:modelValue', parsed)
+		} catch {
+			// If parsing fails, emit the string as-is (user is still typing)
+			// This allows intermediate invalid JSON states while editing
+			emit('update:modelValue', code.value)
+		}
+	} else {
+		emit('update:modelValue', code.value)
+	}
 }
 
 function handleTab(event: KeyboardEvent) {
-	if ('Tab' !== event.key) {return}
+	if (event.key === 'Tab') { return }
 
 	event.preventDefault()
 	const target = event.target as HTMLTextAreaElement
@@ -53,11 +79,24 @@ function handleTab(event: KeyboardEvent) {
 	// Add tab or indent selected text
 	const newValue = `${code.value.substring(0, start)}  ${code.value.substring(end)}`
 	code.value = newValue
-	emit('update:modelValue', code.value)
+
+	// If originally an object, try to parse and emit object
+	if (isObjectMode.value) {
+		try {
+			const parsed = JSON.parse(code.value)
+			emit('update:modelValue', parsed)
+		} catch {
+			// If parsing fails, emit the string as-is
+			emit('update:modelValue', code.value)
+		}
+	} else {
+		emit('update:modelValue', code.value)
+	}
 
 	// Move cursor position after the inserted tab
 	setTimeout(() => {
-		target.selectionStart = target.selectionEnd = start + 2
+		target.selectionStart = start + 2
+		target.selectionEnd = start + 2
 	}, 0)
 }
 
@@ -68,8 +107,9 @@ onMounted(async () => {
 
 watch(() => props.theme, (t) => { setTheme(t) })
 watch(() => props.modelValue, (newVal) => {
-	if (newVal !== undefined && newVal !== code.value) {
-		code.value = newVal
+	const newCodeStr = valueToString(newVal)
+	if (newCodeStr !== code.value) {
+		code.value = newCodeStr
 	}
 }, { immediate: true })
 </script>