@bagelink/vue 1.2.79 → 1.2.83

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

@@ -7,10 +7,9 @@ declare global {
 	}
 }
 import { appendStyle, appendScript } from '@bagelink/vue'
-import { nextTick, onMounted, watch } from 'vue'
+import { onMounted, ref, computed, watch } from 'vue'
 
-// Props
-const { language, readonly = false, modelValue = '', autodetect, ignoreIllegals = true, label, height = '300px' } = defineProps<{
+interface CodeEditorProps {
 	language?: Language
 	readonly?: boolean
 	modelValue?: string
@@ -18,39 +17,50 @@ const { language, readonly = false, modelValue = '', autodetect, ignoreIllegals
 	ignoreIllegals?: boolean
 	label?: string
 	height?: string
-}>()
+}
+// Props with default values
+const props = withDefaults(defineProps<CodeEditorProps>(), {
+	language: 'html',
+	readonly: false,
+	modelValue: '',
+	autodetect: true,
+	ignoreIllegals: true,
+	label: '',
+	height: '240px'
+})
 
 const emit = defineEmits(['update:modelValue'])
+// State
+const code = ref(props.modelValue || '')
+const editorRef = ref<HTMLDivElement>()
+const loaded = ref(false)
+const hljs = ref<HilightJS | null>(null)
+// Computed
+const maxHeight = computed(() => {
+	const h = props.height ?? '240px'
+	return h.match(/^\d+$/) ? `${h}px` : h
+})
 
-let hljs = $ref<HilightJS | null>(null)
+const formattedCode = computed(() => {
+	if (!hljs.value) return escapeHtml(code.value)
 
-let elHeight = $ref(height)
-// State and refs
-let code = $ref('')
-const textarea = $ref<HTMLTextAreaElement>()
-let loaded = $ref(false)
+	try {
+		const lang = props.language || ''
 
-// Computed properties
-const cannotDetectLanguage = $computed(() => {
-	const lang = language || ''
-	return !(autodetect ?? !lang) && !hljs?.getLanguage(lang)
-})
+		if (lang && !props.autodetect && !hljs.value.getLanguage(lang)) {
+			console.warn(`The language "${lang}" is not available.`)
+			return escapeHtml(code.value)
+		}
 
-const className = $computed(() => {
-	if (cannotDetectLanguage) return ''
-	return `hljs ${language || ''}`
-})
+		const result = props.autodetect
+			? hljs.value.highlightAuto(code.value)
+			: hljs.value.highlight(code.value, { language: lang, ignoreIllegals: props.ignoreIllegals })
 
-const highlightedCode = $computed(() => {
-	if (cannotDetectLanguage) {
-		console.warn(`The language "${language}" you specified could not be found.`)
-		return escapeHtml(code)
+		return result.value || escapeHtml(code.value)
+	} catch (error) {
+		console.error('Highlighting error:', error)
+		return escapeHtml(code.value)
 	}
-	const lang = language || ''
-	const result = autodetect
-		? hljs?.highlightAuto(code)
-		: hljs?.highlight(code, { language: lang, ignoreIllegals })
-	return result?.value || ''
 })
 
 // Methods
@@ -67,113 +77,165 @@ function escapeHtml(unsafe: string) {
 	})
 }
 
+function handleInput(e: Event) {
+	const target = e.target as HTMLTextAreaElement
+	code.value = target.value
+	emit('update:modelValue', code.value)
+}
+
 function handleTab(event: KeyboardEvent) {
+	if (event.key !== 'Tab') return
+
+	event.preventDefault()
 	const target = event.target as HTMLTextAreaElement
 	const start = target.selectionStart
-	const tab = '  '
-	code = code.slice(0, start) + tab + code.slice(start)
-	nextTick(() => {
-		target.selectionStart = target.selectionEnd = start + tab.length
-	})
-}
+	const end = target.selectionEnd
 
-function adjustHeight() {
-	if (textarea?.scrollHeight && textarea.scrollHeight > Number.parseInt(elHeight)) {
-		elHeight = `${textarea.scrollHeight}px`
-	}
+	// 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)
+
+	// Move cursor position after the inserted tab
+	setTimeout(() => {
+		target.selectionStart = target.selectionEnd = start + 2
+	}, 0)
 }
 
 // Lifecycle
 onMounted(async () => {
-	// Append scripts and styles for Highlight.js
-	await appendScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js', { id: 'hljs-cdn' })
-	await appendStyle('https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css')
-
-	// Initialize hljs
-	if (window.hljs) {
-		hljs = window.hljs as HilightJS
-		loaded = true
-	} else {
-		console.error('Highlight.js failed to load.')
+	try {
+		// Load highlight.js
+		await appendScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js', { id: 'hljs-cdn' })
+		await appendStyle('https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css')
+
+		if (window.hljs) {
+			hljs.value = window.hljs
+			loaded.value = true
+		} else {
+			console.error('Failed to load highlight.js')
+		}
+	} catch (error) {
+		console.error('Error loading highlight.js:', error)
 	}
 })
 
-watch(() => modelValue, (newVal) => {
-	adjustHeight()
-	if (newVal !== code) {
-		code = newVal
+// Watch for external modelValue changes
+watch(() => props.modelValue, (newVal) => {
+	if (newVal !== undefined && newVal !== code.value) {
+		code.value = newVal
 	}
 }, { immediate: true })
 </script>
 
 <template>
-	<div class="mb-05">
-		<label v-if="label" class="label txt-start">{{ label }}</label>
-		<div v-if="loaded" class="code-editor-wrap grid rounded p-1 overflow hm-300px ltr  txt-start relative h-100p">
-			<div class="relative block h-100" :style="{ height: `calc(${elHeight} - 2rem)` }">
-				<pre class=" overflow-hidden absolute inset-0 p-0 m-0  h-100  codeText">
-					<code class="absolute inset-0" :class="className" v-html="highlightedCode" />
-				</pre>
+	<div class="code-editor-container ltr" :style="{ maxHeight }">
+		<label v-if="label" class="label">{{ label }}</label>
+		<div
+			v-if="loaded"
+			ref="editorRef"
+			class="code-editor-grandpa"
+		>
+			<div class="editor-content-papa relative">
+				<pre class="code-display" wrap><code v-html="formattedCode" /></pre>
 				<textarea
 					v-if="!readonly"
-					ref="textarea"
-					v-model="code"
-					class="code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none txt-start"
+					:value="code"
+					class="code-input"
 					spellcheck="false"
-					placeholder="Write your code here"
-					aria-label="Code Editor"
-					data-gramm="false"
-					@keydown.tab.prevent="handleTab"
-					@input="emit('update:modelValue', code)"
+					autocomplete="off"
+					autocorrect="off"
+					autocapitalize="off"
+					@input="handleInput"
+					@keydown="handleTab"
 				/>
 			</div>
 		</div>
 	</div>
 </template>
 
-<style>
-pre code.hljs{
-	padding: 0 !important;
-	inset: 0 !important;
-	position: absolute;
+<style scoped>
+.code-editor-container {
+	margin-bottom: 0.5rem;
+	height: 100%;
 }
-</style>
 
-<style scoped>
-.codeText{
-  font-family: monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  caret-color: var(--bgl-white);
-  color: var(--bgl-white);
+.label {
+	display: block;
+	text-align: left;
+	margin-bottom: 0.25rem;
 }
-.code-editor-wrap {
-  background: #282c34;
-  height: max-content;
+
+.code-editor-grandpa {
+	background: #22252A;
+	border-radius: 0.25rem;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	padding: 1ch;
+	padding-inline-start: 2ch;
 }
-.code-editor-wrap:focus-within, .code-editor-wrap:focus-visible, .code-editor-wrap:focus {
-    box-shadow: inset 0 0 10px #00000021;
-	outline: solid 1px var(--border-color);
-	/* outline: -webkit-focus-ring-color auto 1px; */
 
+.code-editor-grandpa:focus-within {
+	outline: solid 1px var(--border-color, #4f575f);
+	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
 }
 
-.code-editor-wrap:focus-within:has(textarea:focus) + .label,
-.label:has(+ .code-editor-wrap:focus-within) {
-	color: var(--bgl-primary) !important;
+.editor-content-papa {
+	position: relative;
+	width: 100%;
+	padding-bottom: calc(100% - 5lh);
+}
+.code-display,
+.code-input {
+	inset: 0;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	font-family: monospace;
+	font-size: 1em;
+	line-height: 1.5;
+	tab-size: 2;
+	word-break: keep-all;
+	text-align: left;
 }
 
-.code-editor {
-  color: transparent;
-  resize: none;
+.code-display {
+	position: relative;
+	color:  #fff;
+	pointer-events: none;
+	z-index: 1;
 }
 
-.code-editor::selection {
-  background: #2466bc30;
-  color: inherit;
+.code-display code {
+	display: block;
+	background: transparent !important;
+	padding: 0 !important;
 }
 
-.code-editor:focus {
-  outline: none;
+.code-input {
+	position: absolute;
+	background: transparent;
+	color: transparent;
+	caret-color:  #fff;
+	border: none;
+	resize: none;
+	outline: none;
+	z-index: 2;
+}
+
+.code-input::selection {
+	background-color: rgba(36, 102, 188, 0.3);
+	color: transparent;
+}
+</style>
+
+<style>
+/* Global styles */
+pre code.hljs {
+	padding: 0 !important;
+	background: transparent !important;
 }
 </style>

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

@@ -15,6 +15,9 @@ const editor = useEditor()
 const isInitializing = ref(false)
 const hasInitialized = ref(false)
 
+// Initialize content from modelValue
+editor.state.content = props.modelValue
+
 // Initialize debugger if debug mode is enabled
 if (props.debug) {
 	editor.initDebugger()
@@ -83,6 +86,9 @@ async function initEditor() {
 		// Set default direction based on content
 		doc.body.dir = hasRTL ? 'rtl' : 'ltr'
 
+		// Ensure editor.state.content is set to the current HTML content
+		editor.state.content = doc.body.innerHTML
+
 		editor.init(doc)
 		useEditorKeyboard(doc, commands)
 
@@ -92,6 +98,8 @@ async function initEditor() {
 			p.dir = doc.body.dir
 			p.innerHTML = '<br>'
 			doc.body.appendChild(p)
+			// Update state.content after changes
+			editor.state.content = doc.body.innerHTML
 		} else {
 			// Convert any direct text nodes to paragraphs
 			const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
@@ -112,6 +120,8 @@ async function initEditor() {
 					doc.body.removeChild(textNode)
 				}
 			})
+			// Update state.content after cleanup
+			editor.state.content = doc.body.innerHTML
 		}
 
 		doc.body.focus()
@@ -137,7 +147,7 @@ watch(() => props.modelValue, (newValue, oldValue) => {
 })
 
 watch(() => editor.state.content, (newValue) => {
-	if (editor.state.doc?.body.innerHTML) {
+	if (editor.state.doc?.body) {
 		editor.state.doc.body.dir = hasRTL ? 'rtl' : 'ltr'
 	}
 	emit('update:modelValue', newValue)
@@ -168,7 +178,7 @@ watch(() => editor.state.content, (newValue) => {
 					v-if="editor.state.isSplitView"
 					v-model="editor.state.content"
 					language="html"
-					class="code-editor"
+					:height="editor.state.isFullscreen ? 'calc(100vh - 4rem)' : '250px'"
 					@update:modelValue="editor.updateState.content('html')"
 				/>
 			</div>
@@ -196,12 +206,6 @@ watch(() => editor.state.content, (newValue) => {
 .content-area li{
 	line-height: 1.65;
 }
-
-.code-editor {
-	flex: 1;
-	min-height: 240px !important;
-	height: 100%;
-}
 </style>
 
 <style scoped>
@@ -213,7 +217,7 @@ watch(() => editor.state.content, (newValue) => {
 
 .editor-container {
 	display: flex;
-	gap: 1rem;
+	gap: 0.5rem;
 }
 
 .content-area,
@@ -274,9 +278,6 @@ watch(() => editor.state.content, (newValue) => {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor{
-	height: 100% !important;
-}
 
 .debug-controls {
 	display: flex;

package/src/composables/index.ts

@@ -1,33 +1,32 @@
-import type { BglFormSchemaFnT, BglFormSchemaT, IfAny } from '@bagelink/vue'
+import type { BglFormSchemaT, IfAny } from '@bagelink/vue'
 
-import type { Ref, UnwrapRef } from 'vue'
+import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
-import { ref, watch } from 'vue'
+import { ref, toValue, watch } from 'vue'
 
 export { useDevice } from './useDevice'
 export { usePolling } from './usePolling'
 export { useValidateFieldValue } from './useValidateFieldValue'
 interface UseBglSchemaParamsT<T> {
-	schema?: BglFormSchemaFnT<T>
-	columns?: string[]
-	data?: any[]
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
+	columns?: MaybeRefOrGetter<string[]>
+	data?: T[]
 }
 
 export function useBglSchema<T = { [key: string]: unknown }>(
 	{ schema, columns, data }: UseBglSchemaParamsT<T> = {}
 ): BglFormSchemaT<T> {
-	let _schema = schema
-	if (typeof _schema === 'function') {
-		_schema = _schema()
-	}
+	const _schema = $computed(() => toValue(schema))
+	const _columns = $computed(() => toValue(columns))
+
 	if (_schema) {
 		return (
-			columns && columns.length > 0
-				? _schema.filter(f => columns.includes(f.id as string))
+			_columns && _columns.length > 0
+				? _schema.filter(f => _columns.includes(f.id as string))
 				: _schema
 		) as BglFormSchemaT<T>
 	}
-	return getFallbackSchema(data, columns)
+	return getFallbackSchema(data, _columns)
 }
 
 export function localRef<T>(

package/src/composables/useSchemaField.ts

@@ -1,5 +1,6 @@
 import type { VNode } from 'vue'
-import type { Field, BglFormSchemaT, SchemaChildrenT, Attributes, Path } from '../types/BagelForm'
+
+import type { Field, Attributes, Path, SchemaChild, BaseBagelField, VNodeFn } from '../types/BagelForm'
 import {
 	TextInput,
 	NumberInput,
@@ -20,26 +21,20 @@ import {
 	RangeInput,
 	EmailInput
 } from '@bagelink/vue'
-
 import { h, isVNode } from 'vue'
 
 const SLOT_VALUE_COMPONENTS = new Set(['div', 'span', 'p'])
 
 const SRC_VALUE_COMPONENTS = new Set(['img', 'iframe'])
 
-export interface UseSchemaFieldOptions<T> {
+export interface UseSchemaFieldOptions<T, SFP extends Path<T>> {
 	mode?: 'form' | 'preview' | 'table'
 	getFormData?: () => T
-	onUpdateModelValue?: (field: Field<T>, value: any) => void
+	onUpdateModelValue?: (field: BaseBagelField<T, SFP>, value: any) => void
 	includeUnset?: boolean
 }
 
-// Add type for supported child types
-interface SlotProps<T> { row?: T, field: Field<T> }
-type SlotFunction<T> = (props: SlotProps<T>) => any
-type SupportedSlot<T> = BglFormSchemaT<T> | VNode | SlotFunction<T>
-
-export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseSchemaFieldOptions<T>) {
+export function useSchemaField<T extends { [key: string]: any }, SP extends Path<T>>(optns: UseSchemaFieldOptions<T, SP>) {
 	const { mode = 'form', getFormData, onUpdateModelValue, includeUnset = false } = optns
 
 	// Helper function to render objects recursively
@@ -101,21 +96,21 @@ export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseS
 		return typeof field.$el === 'object' ? field.$el : componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
 	}
 
-	function renderChild(child: SchemaChildrenT<T>[number], slots?: Record<string, SupportedSlot<T>>): any {
-		if (typeof child === 'string') return child
+	function renderChild(child: SchemaChild<T, SP>, slots?: BaseBagelField<T, SP>['slots']) {
+		if (typeof child === 'string') return h(child)
 		if (isVNode(child)) return child
 		return renderField(
-			child,
+			child as BaseBagelField<T, SP>,
 			slots
 		)
 	}
 
 	function renderField(
-		field: Field<T>,
-		slots?: Record<string, SupportedSlot<T>>
-	): VNode | null {
-		const Component = getComponent(field)
-		if (!Component) return null
+		field: BaseBagelField<T, SP>,
+		slots?: BaseBagelField<T, SP>['slots']
+	): VNode | undefined {
+		const Component = getComponent(field as Field<T>)
+		if (!Component) return
 
 		const rowData = (getFormData?.() || {}) as T | undefined
 
@@ -129,14 +124,14 @@ export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseS
 						rowData
 					)
 				) {
-					return null
+					return
 				}
 			} else if (typeof condition === 'string') {
 				if (!rowData?.[condition]) {
-					return null
+					return
 				}
 			} else if (!condition) {
-				return null
+				return
 			}
 		}
 
@@ -234,7 +229,8 @@ export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseS
 		props.class = classify(currentValue, rowData, fieldClass, props.class)
 
 		// Handle component slots with vIf aware child rendering
-		const componentSlots: { [key: string]: any } = {}
+		// const componentSlots: { [name: string]: Slot } = {}
+		const componentSlots: Parameters<typeof h>[1] = {}
 
 		// Add default slot if there are children
 		if (children?.length) {
@@ -254,29 +250,35 @@ export function useSchemaField<T extends { [key: string]: any }, _P>(optns: UseS
 				componentSlots[name] = () => {
 					if (Array.isArray(slot)) {
 						// Handle BglFormSchemaT array
-						return slot.map(schemaField => renderField(schemaField, slots))
-					} if (isVNode(slot)) {
-						// Handle VNode
-						return slot
-					} if (typeof slot === 'function') {
-						// Handle function slot
-						const slotFn = slot as (props: SlotProps<T>) => any
-						return slotFn({ row: rowData, field })
+						return slot.map((schemaField) => {
+							if (typeof schemaField === 'function') {
+								// Handle function slot
+								const slotFn = schemaField
+								return slotFn({ row: rowData, field })
+							}
+							if (isVNode(schemaField)) {
+								// Handle VNode
+								return schemaField
+							}
+
+							return renderField(schemaField as BaseBagelField<T, SP>, slots)
+						})
 					}
-					return slot
 				}
 			})
 		}
 
 		// Handle custom slot content from parent
-		const slotContent = field.id && slots?.[field.id]
-			? (slots[field.id] as SlotFunction<T>)({ row: rowData, field })
-			: undefined
+
+		const slotContent = field.id ? (slots?.[field.id] as VNodeFn<T, SP> | undefined)?.({ row: rowData, field }) : undefined
+		// field.id && slots?.[field.id] && typeof slots[field.id] === 'function' && !Array.isArray(slots?.[field.id])
+		// 			? (slots[field.id])({ row: rowData, field })
+		// 			: undefined
 
 		if (mode === 'preview') {
 			// Skip rendering if value is unset and includeUnset is false
 			if (!includeUnset && (transformedValue === undefined || transformedValue === null || transformedValue.length === 0)) {
-				return null
+				return
 			}
 
 			return h('div', { class: 'preview-field' }, [

package/src/index.ts

@@ -17,4 +17,4 @@ export * from './utils/calendar/dateUtils'
 import './styles/bagel.css'
 
 export * from './utils/constants'
-export * from './utils/search'
+export * from './utils/useSearch'

package/src/plugins/modalTypes.ts

@@ -1,4 +1,5 @@
-import type { BglFormSchemaFnT, BtnOptions, ThemeType } from '@bagelink/vue'
+import type { BglFormSchemaT, BtnOptions, ThemeType } from '@bagelink/vue'
+import type { MaybeRefOrGetter } from 'vue'
 
 export interface ModalOptions {
 	title?: string
@@ -37,7 +38,7 @@ export interface ModalFormComponentProps<T extends { [key: string]: any }> exten
 }
 
 export interface ModalFormOptions<T extends { [key: string]: any }> {
-	'schema': BglFormSchemaFnT<T>
+	'schema': MaybeRefOrGetter<BglFormSchemaT<T>>
 	'modelValue'?: T
 	'onUpdate:modelValue'?: (val: T) => void
 	'onSubmit'?: (formData: T) => any