@bagelink/vue 1.4.105 → 1.4.107

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

@@ -1,26 +1,27 @@
 <script setup lang="ts">
-import type { CodeEditorProps } from './CodeTypes'
-import { onMounted, ref, computed, watch } from 'vue'
+import type { Language, HighlightTheme } from './CodeTypes'
+import { onMounted, ref, computed, watch, type PropType } from 'vue'
 import { useHighlight } from './useHighlight'
 
-// Props with default values
-const props = withDefaults(defineProps<CodeEditorProps>(), {
-	language: 'html',
-	readonly: false,
-	modelValue: '',
-	autodetect: true,
-	ignoreIllegals: true,
-	label: '',
-	height: '240px'
+// Props with runtime defaults to avoid undefined at runtime
+const props = defineProps({
+	language: { type: String as PropType<Language>, default: 'html' },
+	readonly: { type: Boolean, default: false },
+	modelValue: { type: String, default: '' },
+	autodetect: { type: Boolean, default: true },
+	ignoreIllegals: { type: Boolean, default: true },
+	label: { type: String, default: '' },
+	height: { type: String, default: '240px' },
+	disabled: { type: Boolean, default: false },
+	theme: { type: String as PropType<HighlightTheme>, default: 'dark' }
 })
 
 const emit = defineEmits(['update:modelValue'])
 // State
 const code = ref(props.modelValue || '')
 const editorRef = ref<HTMLDivElement>()
-const { loaded, loadHighlight, highlightCode } = useHighlight()
+const { loaded, loadHighlight, highlightCode, setTheme } = useHighlight(props.theme)
 
-// Computed
 const maxHeight = computed(() => {
 	const h = props.height ?? '240px'
 	return h.match(/^\d+$/) ? `${h}px` : h
@@ -65,7 +66,7 @@ onMounted(async () => {
 	await loadHighlight()
 })
 
-// Watch for external modelValue changes
+watch(() => props.theme, (t) => { setTheme(t) })
 watch(() => props.modelValue, (newVal) => {
 	if (newVal !== undefined && newVal !== code.value) {
 		code.value = newVal
@@ -76,22 +77,12 @@ watch(() => props.modelValue, (newVal) => {
 <template>
 	<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 v-if="loaded" ref="editorRef" class="code-editor-grandpa hljs">
 			<div class="editor-content-papa relative">
 				<pre class="code-display" wrap><code v-html="formattedCode" /></pre>
 				<textarea
-					v-if="!readonly"
-					:value="code"
-					class="code-input"
-					spellcheck="false"
-					autocomplete="off"
-					autocorrect="off"
-					autocapitalize="off"
-					@input="handleInput"
+					v-if="!readonly && !disabled" :value="code" class="code-input" spellcheck="false"
+					autocomplete="off" autocorrect="off" autocapitalize="off" @input="handleInput"
 					@keydown="handleTab"
 				/>
 			</div>
@@ -112,7 +103,6 @@ watch(() => props.modelValue, (newVal) => {
 }
 
 .code-editor-grandpa {
-	background: #22252A;
 	border-radius: 0.25rem;
 	width: 100%;
 	height: 100%;
@@ -131,6 +121,7 @@ watch(() => props.modelValue, (newVal) => {
 	width: 100%;
 	padding-bottom: calc(100% - 5lh);
 }
+
 .code-display,
 .code-input {
 	inset: 0;
@@ -149,7 +140,6 @@ watch(() => props.modelValue, (newVal) => {
 
 .code-display {
 	position: relative;
-	color:  #fff;
 	pointer-events: none;
 	z-index: 1;
 }
@@ -164,7 +154,7 @@ watch(() => props.modelValue, (newVal) => {
 	position: absolute;
 	background: transparent;
 	color: transparent;
-	caret-color:  #fff;
+	caret-color: #fff;
 	border: none;
 	resize: none;
 	outline: none;

package/src/components/form/inputs/CodeEditor/useHighlight.ts

@@ -1,4 +1,4 @@
-import type { HighlightJS } from './CodeTypes'
+import type { HighlightJS, HighlightTheme } from './CodeTypes'
 import { appendStyle, appendScript } from '@bagelink/vue'
 import { ref } from 'vue'
 
@@ -8,9 +8,44 @@ interface CustomWindow extends Window {
 }
 declare const window: CustomWindow
 
-export function useHighlight() {
+export function useHighlight(theme: HighlightTheme = 'dark') {
 	const hljs = ref<HighlightJS | null>(null)
 	const loaded = ref(false)
+	const currentTheme = ref<HighlightTheme>(theme)
+
+	const normalizeTheme = (t: HighlightTheme): HighlightTheme => {
+		if (t === 'dark') return 'atom-one-dark'
+		if (t === 'light') return 'atom-one-light'
+		return t
+	}
+
+	const getThemeCssUrl = (t: HighlightTheme) => `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/${t}.min.css`
+
+	const removeExistingThemeLinks = () => {
+		document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
+			if (link instanceof HTMLLinkElement && link.href.includes('/styles/')) {
+				if (link.href.includes('highlight.js')) link.parentElement?.removeChild(link)
+			}
+		})
+	}
+
+	const setTheme = async (theme: HighlightTheme) => {
+		const next = normalizeTheme(theme)
+		if (next === currentTheme.value) return
+		try {
+			removeExistingThemeLinks()
+			const url = getThemeCssUrl(next)
+			console.log('setTheme', url)
+			await appendStyle(url)
+			currentTheme.value = next
+		} catch (error) {
+			console.error('Failed to apply theme. Falling back to atom-one-dark:', error)
+			removeExistingThemeLinks()
+			currentTheme.value = 'atom-one-dark'
+			const url = getThemeCssUrl(currentTheme.value)
+			await appendStyle(url)
+		}
+	}
 
 	const loadHighlight = async () => {
 		if (loaded.value) return
@@ -18,7 +53,7 @@ export function useHighlight() {
 		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')
+			await setTheme(currentTheme.value)
 
 			if (window.hljs) {
 				hljs.value = window.hljs
@@ -70,6 +105,8 @@ export function useHighlight() {
 		hljs,
 		loaded,
 		loadHighlight,
+		setTheme,
+		currentTheme,
 		escapeHtml,
 		highlightCode
 	}

package/src/composables/useSchemaField.ts

@@ -118,16 +118,21 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 		const condition = field.vIf ?? field['v-if']
 		if (condition !== undefined) {
 			if (typeof condition === 'function') {
-				if (
-					!condition(
-						field.id ? rowData?.[field.id] : undefined,
-						rowData
-					)
-				) {
+				// Compute currentValue for the vIf check
+				const vIfCurrentValue = field.id
+					? ('get' in (rowData || {})
+						? (rowData as any)?.get(field.id)
+						: (rowData as any)?.[field.id as keyof T])
+					: undefined
+
+				const vIfResult = field.id
+					? condition(vIfCurrentValue, rowData)
+					: (condition as any)(rowData)
+				if (!vIfResult) {
 					return
 				}
 			} else if (typeof condition === 'string') {
-				if (!rowData?.[condition]) {
+				if (!(rowData as any)?.[condition]) {
 					return
 				}
 			} else if (!condition) {
@@ -136,10 +141,10 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 		}
 
 		const {
-			$el,
+			$el: _$el,
 			children,
-			options,
-			attrs,
+			options: _options,
+			attrs: _attrs,
 			class: fieldClass,
 			id,
 			transform,
@@ -156,11 +161,16 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 		// Use the get method if available, otherwise fall back to direct access
 		const currentValue = field.id
 			? ('get' in (rowData || {})
-				? rowData?.get(field.id)
-				: rowData?.[field.id])
+				? (rowData as any)?.get(field.id)
+				: (rowData as any)?.[field.id as keyof T])
 			: undefined
 
-		const transformedValue = transform ? transform(currentValue, rowData) : currentValue
+		// Apply transform with conditional args: provide (val,row) only when id exists; otherwise provide only (row)
+		const transformedValue = transform
+			? (id
+				? transform(currentValue, rowData)
+				: (transform as any)(rowData))
+			: currentValue
 
 		// First bind any function attributes with the current value and row data
 		const boundFieldProps = bindAttrs(fieldProps as Attributes<T, Path<T>> | undefined, currentValue, rowData)
@@ -182,6 +192,18 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 			onUpdate,
 		}
 
+		// Wire top-level onClick with conditional args
+		if (typeof (field as any).onClick === 'function') {
+			const original = (field as any).onClick as (val?: any, row?: T) => void
+			props.onClick = (..._args: any[]) => {
+				if (id) {
+					original(currentValue, rowData)
+				} else {
+					;(original as any)(rowData)
+				}
+			}
+		}
+
 		// For form mode, always use the original value for modelValue
 		if (mode === 'form') {
 			props.modelValue = currentValue
@@ -214,7 +236,16 @@ export function useSchemaField<T extends { [key: string]: any }, SP extends Path
 			const boundAttrs = bindAttrs(field.attrs, currentValue, rowData)
 			Object.entries(boundAttrs).forEach(([key, value]) => {
 				if (typeof value === 'function') {
-					if (key.startsWith('on')) {
+					if (key === 'onClick') {
+						const original = value as (val?: any, row?: T) => void
+						props.onClick = (..._args: any[]) => {
+							if (id) {
+								original(currentValue, rowData)
+							} else {
+								;(original as any)(rowData)
+							}
+						}
+					} else if (key.startsWith('on')) {
 						props[key] = value
 					} else {
 						props[key] = value(currentValue, rowData)

package/src/styles/modal.css

@@ -1,134 +1,134 @@
 .bg-dark {
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	background-color: var(--bgl-dark-bg);
-	pointer-events: none;
-	opacity: 0;
-	transition: all ease-in-out 0.3s;
-	max-height: 100vh;
-	overflow: scroll;
-	margin: 0 auto;
-	width: 100%;
-	display: grid;
-	align-items: center;
-	overflow-x: hidden;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: var(--bgl-dark-bg);
+    pointer-events: none;
+    opacity: 0;
+    transition: all ease-in-out 0.3s;
+    max-height: 100vh;
+    overflow: scroll;
+    margin: 0 auto;
+    width: 100%;
+    display: grid;
+    align-items: center;
+    overflow-x: hidden;
 }
 
 .bg-lignt {
-	background-color: var(--bgl-white);
+    background-color: var(--bgl-white);
 }
 
 .modal {
-	width: 96%;
-	max-width: 720px;
-	/* transform: scale(0.5); */
-	/* opacity: 0; */
-	transition: all ease-in-out 0.18s;
-	margin-left: auto;
-	margin-right: auto;
-	height: fit-content;
+    width: 96%;
+    max-width: 720px;
+    /* transform: scale(0.5); */
+    /* opacity: 0; */
+    transition: all ease-in-out 0.18s;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
 }
 
 .is-active .modal {
-	animation: 200ms ease bgl-modal-animation;
+    animation: 200ms ease bgl-modal-animation;
 }
 
 @keyframes bgl-modal-animation {
-	from {
-		scale: 0.7;
-		transform: translateY(2rem);
-	}
+    from {
+        scale: 0.7;
+        transform: translateY(2rem);
+    }
 
-	to {
-		scale: 1;
-		transform: translateY(0);
-	}
+    to {
+        scale: 1;
+        transform: translateY(0);
+    }
 }
 
 .small-modal .modal {
-	max-width: 300px;
-	text-align: center;
+    max-width: 300px;
+    text-align: center;
 }
 
 .tool-bar {
-	margin: -1rem -1rem 1rem;
-	display: flex;
-	justify-content: space-between;
-	position: -webkit-sticky;
-	position: sticky;
-	padding-top: 0rem;
-	top: 0rem;
-	z-index: 3;
-	background: var(--bgl-popup-bg);
-	border-radius: var(--card-border-radius);
+    margin: -1rem -1rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    position: -webkit-sticky;
+    position: sticky;
+    padding-top: 0rem;
+    top: 0rem;
+    z-index: 3;
+    background: var(--bgl-popup-bg);
+    /* border-radius: var(--card-border-radius); */
 }
 
 .modal-size {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .is-side .modal {
-	inset-inline-end: -1720px;
-	opacity: 1;
-	max-width: 600px;
-	width: 90%;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	margin-inline-start: auto;
-	margin-inline-end: 20px;
-	min-height: calc(100vh - 40px);
-	transform: translateX(100%);
+    inset-inline-end: -1720px;
+    opacity: 1;
+    max-width: 600px;
+    width: 90%;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    margin-inline-start: auto;
+    margin-inline-end: 20px;
+    min-height: calc(100vh - 40px);
+    transform: translateX(100%);
 }
 
 .is-active .modal {
-	opacity: 1;
-	box-shadow: 6px 6px 20px 20px #0000001c;
+    opacity: 1;
+    box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .bg-lignt .modal {
-	border: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
 }
 
 .bg-lignt.is-active .modal {
-	box-shadow: none;
+    box-shadow: none;
 }
 
 .is-active.is-side .modal {
-	inset-inline-end: 0px;
-	transform: translateX(0%);
+    inset-inline-end: 0px;
+    transform: translateX(0%);
 }
 
 .bg-dark.is-active {
-	opacity: 1;
-	pointer-events: all;
+    opacity: 1;
+    pointer-events: all;
 }
 
 body:has(.bg-dark.is-active) {
-	overflow: hidden;
+    overflow: hidden;
 }
 
 .is-side.bg-dark.is-active {
-	opacity: 1;
-	align-items: stretch;
+    opacity: 1;
+    align-items: stretch;
 }
 
 .is-side.is-active .modal {
-	pointer-events: all;
+    pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-	.tool-bar {
-		margin: -1rem 0rem 1rem;
-		padding-bottom: 1rem;
-		align-items: center;
-	}
-
-	.is-active.is-side .modal {
-		margin-inline-end: 2%;
-		margin-inline-start: 2%;
-		width: 98%;
-	}
-}
+    .tool-bar {
+        margin: -1rem 0rem 1rem;
+        padding-bottom: 1rem;
+        align-items: center;
+    }
+
+    .is-active.is-side .modal {
+        margin-inline-end: 2%;
+        margin-inline-start: 2%;
+        width: 98%;
+    }
+}

package/src/types/BagelForm.ts

@@ -77,13 +77,13 @@ export interface ElementField<
 	T,
 	PO extends PathsOptions = DefaultPathsOptions,
 > {
-	$el: string
+	$el: any
 	id?: Path<T, PO> | string
 	class?: any
 	vIf?: any
 	style?: Record<string, any>
 	attrs?: Record<string, any>
-	onClick?: () => void
+	onClick?: (val?: any, rowData?: T) => void
 	transform?: (val?: any, rowData?: T) => any
 	children?: ElementField<T, PO>[]
 }

package/src/utils/BagelFormUtils.ts

@@ -8,6 +8,7 @@ export interface InputOptions<
 > extends Partial<BaseBagelField<T, P>> {
 	defaultValue?: string | number
 	autocomplete?: AutoFillField
+	helpText?: string
 }
 
 export interface DateOptions<T, K extends Path<T>> extends InputOptions<T, K> {

package/src/utils/elementUtils.ts

@@ -1,4 +1,6 @@
-import type { IconType, Option, Path, ElementField } from '@bagelink/vue'
+import type { ElementField, IconType, Option, Path } from '@bagelink/vue'
+import { Dropdown, ListItem } from '@bagelink/vue'
+import { markRaw } from 'vue'
 
 export type DefaultPathsOptions = Record<string, any>
 export type PathsOptions = Record<string, any>
@@ -30,7 +32,6 @@ export interface TxtElementOptions<
 	weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'
 	color?: string
 	align?: 'left' | 'center' | 'right' | 'justify'
-	transform?: (val?: any, rowData?: T) => any
 }
 
 export interface ImgElementOptions<
@@ -64,6 +65,7 @@ export interface ListItemElementOptions<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions
 > extends Partial<BaseElementField<T, PO>> {
+	id?: Path<T, PO>
 	title?: string
 	subtitle?: string
 	icon?: IconType
@@ -373,8 +375,8 @@ export function img<
 		class: finalOptions.class,
 		vIf: finalOptions.vIf,
 		style: finalOptions.style,
+		transform: finalOptions.transform,
 		attrs: {
-			src: finalSrc || (finalOptions.src ?? '') || '',
 			alt: finalOptions.alt,
 			width: finalOptions.width,
 			height: finalOptions.height,
@@ -386,50 +388,68 @@ export function img<
 	}
 }
 
-// Dropdown element function following BagelForm pattern
-export function dropdownElement<
+export function dropdown<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	id?: Path<T, PO>,
-	options?: Option[] | (() => Option[]),
-	config?: DropdownElementOptions<T, PO>,
+	...args: Array<DropdownElementOptions<T, PO> | BaseElementField<T, PO>>
 ): BaseElementField<T, PO> {
+	let opts: DropdownElementOptions<T, PO> | undefined
+	let children: BaseElementField<T, PO>[] = []
+
+	if (args.length > 0) {
+		const firstArg = args[0] as DropdownElementOptions<T, PO> | BaseElementField<T, PO>
+		if (
+			typeof firstArg === 'object'
+			&& firstArg !== null
+			&& ('$el' in (firstArg as Record<string, unknown>))
+		) {
+			children = args as BaseElementField<T, PO>[]
+		} else {
+			opts = firstArg as DropdownElementOptions<T, PO>
+			children = args.slice(1) as BaseElementField<T, PO>[]
+		}
+	}
+
+	const attrs: Record<string, unknown> = {}
+	if (opts?.attrs) Object.assign(attrs, opts.attrs)
+	if (opts) {
+		if (opts.options != null) attrs.options = opts.options
+		if (opts.placeholder != null) attrs.placeholder = opts.placeholder
+		if (opts.searchable != null) attrs.searchable = opts.searchable
+		if (opts.multiselect != null) attrs.multiselect = opts.multiselect
+		if (opts.clearable != null) attrs.clearable = opts.clearable
+		if (opts.onSelect != null) attrs.onSelect = opts.onSelect
+		if (opts.onSearch != null) attrs.onSearch = opts.onSearch
+	}
+
 	return {
-		$el: 'dropdown',
-		id,
-		class: config?.class,
-		vIf: config?.vIf,
-		style: config?.style,
-		attrs: {
-			options: options || config?.options,
-			placeholder: config?.placeholder,
-			searchable: config?.searchable,
-			multiselect: config?.multiselect,
-			clearable: config?.clearable,
-			onSelect: config?.onSelect,
-			onSearch: config?.onSearch,
-		},
+		$el: markRaw(Dropdown),
+		class: opts?.class,
+		vIf: opts?.vIf,
+		style: opts?.style,
+		attrs,
+		children,
 	}
 }
 
 // ListItem element function following BagelForm pattern
-export function listItemElement<
+export function listItem<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	id?: Path<T, PO>,
 	title?: string,
 	options?: ListItemElementOptions<T, PO>,
 ): BaseElementField<T, PO> {
 	return {
-		$el: 'listItem',
-		id,
+		$el: markRaw(ListItem),
+		id: options?.id,
 		class: options?.class,
 		vIf: options?.vIf,
 		style: options?.style,
 		onClick: options?.onClick,
 		attrs: {
+			thin: true,
 			title: title ?? options?.title ?? '',
 			subtitle: options?.subtitle,
 			icon: options?.icon,
@@ -443,7 +463,7 @@ export function listItemElement<
 }
 
 // Container element function following BagelForm pattern
-export function containerElement<
+export function container<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
@@ -494,6 +514,7 @@ export function column<T = any, P extends Path<T, PO> = any, PO extends PathsOpt
 		class: options?.class ?? 'column-class',
 		vIf: options?.vIf,
 		style: options?.style,
+		transform: options?.transform,
 		attrs: {
 			...options?.attrs,
 			label: label ?? options?.attrs?.label ?? '',
@@ -510,9 +531,9 @@ export function useElements() {
 		iconBtn,
 		txt,
 		img,
-		dropdownElement,
-		listItemElement,
-		containerElement,
+		dropdown,
+		listItem,
+		container,
 		findElementById,
 		getBaseElementField,
 		col,