@bagelink/vue 1.4.105 → 1.4.109

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

@@ -201,6 +201,263 @@ export const codeLanguages = {
 
 export type Language = 'html' | 'css' | 'javascript' | 'typescript' | 'json' | 'markdown' | string
 
+export type HighlightTheme = 'dark' | 'light'
+	| '1c-light'
+	| 'a11y-dark'
+	| 'a11y-light'
+	| 'agate'
+	| 'an-old-hope'
+	| 'androidstudio'
+	| 'arduino-light'
+	| 'arta'
+	| 'ascetic'
+	| 'atom-one-dark-reasonable'
+	| 'atom-one-dark'
+	| 'atom-one-light'
+	| 'base16-3024'
+	| 'base16-apathy'
+	| 'base16-apprentice'
+	| 'base16-ashes'
+	| 'base16-atelier-cave-light'
+	| 'base16-atelier-cave'
+	| 'base16-atelier-dune-light'
+	| 'base16-atelier-dune'
+	| 'base16-atelier-estuary-light'
+	| 'base16-atelier-estuary'
+	| 'base16-atelier-forest-light'
+	| 'base16-atelier-forest'
+	| 'base16-atelier-heath-light'
+	| 'base16-atelier-heath'
+	| 'base16-atelier-lakeside-light'
+	| 'base16-atelier-lakeside'
+	| 'base16-atelier-plateau-light'
+	| 'base16-atelier-plateau'
+	| 'base16-atelier-savanna-light'
+	| 'base16-atelier-savanna'
+	| 'base16-atelier-seaside-light'
+	| 'base16-atelier-seaside'
+	| 'base16-atelier-sulphurpool-light'
+	| 'base16-atelier-sulphurpool'
+	| 'base16-atlas'
+	| 'base16-bespin'
+	| 'base16-black-metal-bathory'
+	| 'base16-black-metal-burzum'
+	| 'base16-black-metal-dark-funeral'
+	| 'base16-black-metal-gorgoroth'
+	| 'base16-black-metal-immortal'
+	| 'base16-black-metal-khold'
+	| 'base16-black-metal-marduk'
+	| 'base16-black-metal-mayhem'
+	| 'base16-black-metal-nile'
+	| 'base16-black-metal-venom'
+	| 'base16-black-metal'
+	| 'base16-brewer'
+	| 'base16-bright'
+	| 'base16-brogrammer'
+	| 'base16-brush-trees-dark'
+	| 'base16-brush-trees'
+	| 'base16-chalk'
+	| 'base16-circus'
+	| 'base16-classic-dark'
+	| 'base16-classic-light'
+	| 'base16-codeschool'
+	| 'base16-colors'
+	| 'base16-cupcake'
+	| 'base16-cupertino'
+	| 'base16-danqing'
+	| 'base16-darcula'
+	| 'base16-dark-violet'
+	| 'base16-darkmoss'
+	| 'base16-darktooth'
+	| 'base16-decaf'
+	| 'base16-default-dark'
+	| 'base16-default-light'
+	| 'base16-dirtysea'
+	| 'base16-dracula'
+	| 'base16-edge-dark'
+	| 'base16-edge-light'
+	| 'base16-eighties'
+	| 'base16-embers'
+	| 'base16-equilibrium-dark'
+	| 'base16-equilibrium-gray-dark'
+	| 'base16-equilibrium-gray-light'
+	| 'base16-equilibrium-light'
+	| 'base16-espresso'
+	| 'base16-eva-dim'
+	| 'base16-eva'
+	| 'base16-flat'
+	| 'base16-framer'
+	| 'base16-fruit-soda'
+	| 'base16-gigavolt'
+	| 'base16-github'
+	| 'base16-google-dark'
+	| 'base16-google-light'
+	| 'base16-grayscale-dark'
+	| 'base16-grayscale-light'
+	| 'base16-green-screen'
+	| 'base16-gruvbox-dark-hard'
+	| 'base16-gruvbox-dark-medium'
+	| 'base16-gruvbox-dark-pale'
+	| 'base16-gruvbox-dark-soft'
+	| 'base16-gruvbox-light-hard'
+	| 'base16-gruvbox-light-medium'
+	| 'base16-gruvbox-light-soft'
+	| 'base16-hardcore'
+	| 'base16-harmonic16-dark'
+	| 'base16-harmonic16-light'
+	| 'base16-heetch-dark'
+	| 'base16-heetch-light'
+	| 'base16-helios'
+	| 'base16-hopscotch'
+	| 'base16-horizon-dark'
+	| 'base16-horizon-light'
+	| 'base16-humanoid-dark'
+	| 'base16-humanoid-light'
+	| 'base16-ia-dark'
+	| 'base16-ia-light'
+	| 'base16-icy-dark'
+	| 'base16-ir-black'
+	| 'base16-isotope'
+	| 'base16-kimber'
+	| 'base16-london-tube'
+	| 'base16-macintosh'
+	| 'base16-marrakesh'
+	| 'base16-materia'
+	| 'base16-material-darker'
+	| 'base16-material-lighter'
+	| 'base16-material-palenight'
+	| 'base16-material-vivid'
+	| 'base16-material'
+	| 'base16-mellow-purple'
+	| 'base16-mexico-light'
+	| 'base16-mocha'
+	| 'base16-monokai'
+	| 'base16-nebula'
+	| 'base16-nord'
+	| 'base16-nova'
+	| 'base16-ocean'
+	| 'base16-oceanicnext'
+	| 'base16-one-light'
+	| 'base16-onedark'
+	| 'base16-outrun-dark'
+	| 'base16-papercolor-dark'
+	| 'base16-papercolor-light'
+	| 'base16-paraiso'
+	| 'base16-pasque'
+	| 'base16-phd'
+	| 'base16-pico'
+	| 'base16-pop'
+	| 'base16-porple'
+	| 'base16-qualia'
+	| 'base16-railscasts'
+	| 'base16-rebecca'
+	| 'base16-ros-pine-dawn'
+	| 'base16-ros-pine-moon'
+	| 'base16-ros-pine'
+	| 'base16-sagelight'
+	| 'base16-sandcastle'
+	| 'base16-seti-ui'
+	| 'base16-shapeshifter'
+	| 'base16-silk-dark'
+	| 'base16-silk-light'
+	| 'base16-snazzy'
+	| 'base16-solar-flare-light'
+	| 'base16-solar-flare'
+	| 'base16-solarized-dark'
+	| 'base16-solarized-light'
+	| 'base16-spacemacs'
+	| 'base16-summercamp'
+	| 'base16-summerfruit-dark'
+	| 'base16-summerfruit-light'
+	| 'base16-synth-midnight-terminal-dark'
+	| 'base16-synth-midnight-terminal-light'
+	| 'base16-tango'
+	| 'base16-tender'
+	| 'base16-tomorrow-night'
+	| 'base16-tomorrow'
+	| 'base16-twilight'
+	| 'base16-unikitty-dark'
+	| 'base16-unikitty-light'
+	| 'base16-vulcan'
+	| 'base16-windows-10-light'
+	| 'base16-windows-10'
+	| 'base16-windows-95-light'
+	| 'base16-windows-95'
+	| 'base16-windows-high-contrast-light'
+	| 'base16-windows-high-contrast'
+	| 'base16-windows-nt-light'
+	| 'base16-windows-nt'
+	| 'base16-woodland'
+	| 'base16-xcode-dusk'
+	| 'base16-zenburn'
+	| 'brown-paper'
+	| 'codepen-embed'
+	| 'color-brewer'
+	| 'cybertopia-cherry'
+	| 'cybertopia-dimmer'
+	| 'cybertopia-icecap'
+	| 'cybertopia-saturated'
+	| 'default'
+	| 'devibeans'
+	| 'docco'
+	| 'far'
+	| 'felipec'
+	| 'foundation'
+	| 'github-dark-dimmed'
+	| 'github-dark'
+	| 'github'
+	| 'gml'
+	| 'googlecode'
+	| 'gradient-dark'
+	| 'gradient-light'
+	| 'grayscale'
+	| 'hybrid'
+	| 'idea'
+	| 'intellij-light'
+	| 'ir-black'
+	| 'isbl-editor-dark'
+	| 'isbl-editor-light'
+	| 'kimbie-dark'
+	| 'kimbie-light'
+	| 'lightfair'
+	| 'lioshi'
+	| 'magula'
+	| 'mono-blue'
+	| 'monokai-sublime'
+	| 'monokai'
+	| 'night-owl'
+	| 'nnfx-dark'
+	| 'nnfx-light'
+	| 'nord'
+	| 'obsidian'
+	| 'panda-syntax-dark'
+	| 'panda-syntax-light'
+	| 'paraiso-dark'
+	| 'paraiso-light'
+	| 'pojoaque'
+	| 'purebasic'
+	| 'qtcreator-dark'
+	| 'qtcreator-light'
+	| 'rainbow'
+	| 'rose-pine-dawn'
+	| 'rose-pine-moon'
+	| 'rose-pine'
+	| 'routeros'
+	| 'school-book'
+	| 'shades-of-purple'
+	| 'srcery'
+	| 'stackoverflow-dark'
+	| 'stackoverflow-light'
+	| 'sunburst'
+	| 'tokyo-night-dark'
+	| 'tokyo-night-light'
+	| 'tomorrow-night-blue'
+	| 'tomorrow-night-bright'
+	| 'vs'
+	| 'vs2015'
+	| 'xcode'
+	| 'xt256'
+
 export interface CodeEditorProps {
 	language?: Language
 	readonly?: boolean
@@ -209,4 +466,7 @@ export interface CodeEditorProps {
 	ignoreIllegals?: boolean
 	label?: string
 	height?: string
+	disabled?: boolean
+	/** highlight.js theme selection */
+	theme?: HighlightTheme
 }

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)