@bagelink/vue 1.2.111 → 1.2.119

package/src/components/ImportData.vue

@@ -17,6 +17,7 @@ import {
 import { computed, reactive, ref, watch, watchEffect } from 'vue'
 
 import { useSchemaField } from '../composables/useSchemaField'
+import TextInput from './form/inputs/TextInput.vue'
 
 // Add interface for schema items
 interface SchemaItem {
@@ -1512,21 +1513,23 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 <template>
 	<Card class="upload-data-container h-100p grid overflow-hidden list-wrap ">
 		<h2 class="line-height-1 m-0 pb-2 txt-center" v-text="props.title || 'Upload and Map Data'" />
-		<DragOver
-			v-if="!file"
-			accept=".csv,.xls,.xlsx"
-			@addFiles="addFile"
-			@click="browse(false)"
-		>
-			<Card class="flex flex-column items-center justify-center outline-dashed outline-3 bg-input hover h-100p justify-content-center">
-				<Icon name="upload" size="5" />
-				<p>Drag and drop an Excel or CSV file here</p>
-				<p>or click to select a file</p>
-				<p class="txt-12 color-gray">
-					Accepts .xlsx, .xls, and .csv files
-				</p>
-			</Card>
-		</DragOver>
+		<div v-if="!file" class="h-100p flex column justify-content-center">
+			<DragOver
+				accept=".csv,.xls,.xlsx"
+				class="max-h300px w-500px"
+				@addFiles="addFile"
+				@click="browse(false)"
+			>
+				<Card class="flex flex-column items-center justify-center outline-dashed outline-3 bg-input hover h-100p justify-content-center txt-center">
+					<Icon name="upload" size="5" />
+					<p>Drag and drop an Excel or CSV file here</p>
+					<u>or click to select a file</u>
+					<p class="txt-12 color-gray">
+						Accepts .xlsx, .xls, and .csv files
+					</p>
+				</Card>
+			</DragOver>
+		</div>
 
 		<!-- Loading indicator -->
 		<div v-if="isLoading" class="loading-container">
@@ -1536,10 +1539,19 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 
 		<!-- Step 2: Sheet selection and configuration -->
 		<div class="overflow h-100p">
-			<div v-if="file && !isLoading && sheetNames.length > 0" class="config-section flex gap-05 pb-2">
-				<Btn v-tooltip="'Change File'" :value="file.name" thin round iconEnd="edit" @click="file = null" />
+			<div v-if="file && !isLoading && sheetNames.length > 0" class="config-section flex gap-05 pb-2 m_flex-wrap">
+				<Btn v-tooltip="'Change File'" class="px-1" color="gray" @click="file = null">
+					<Icon icon="draft" size="1.5" weight="300" />
+					<p>
+						{{ file.name }}
+					</p>
+					<!-- <Icon icon="edit" size="0.75" /> -->
+				</Btn>
 				<SelectInput v-if="sheetNames.length > 1" v-model="selectedSheet" :options="sheetNames" label="Select Sheet" />
-				<CheckInput v-model="hasHeaders" label="Mark this if file has a header row" class="m-0" />
+				<CheckInput
+					v-model="hasHeaders" label="Mark this if file has a header row" class="m-0"
+					style="--bgl-accent-color: var(--bgl-black); --bgl-primary: var(--bgl-black);"
+				/>
 			</div>
 
 			<!-- Step 3: Field Mapping -->
@@ -1552,7 +1564,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</p>
 
 				<div class="mapping-table">
-					<div class="grid grid-wrap-5 gap-1 bold pb-1">
+					<div class="grid grid-wrap-5 gap-1 bold pb-1 m_none">
 						<p>Schema Field</p>
 						<p>Column from File</p>
 						<p>Default Value</p>
@@ -1560,10 +1572,12 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						<p>Actions</p>
 					</div>
 
-					<div v-for="field in schemaFields" :key="field.id" class="grid grid-wrap-5 gap-1" :class="{ 'array-field-row': field.isArrayField || field.$el === 'array' }">
+					<div v-for="field in schemaFields" :key="field.id" class="grid grid-wrap-5 gap-1  m_gap-025 m_pb-1-5" :class="{ 'array-field-row': field.isArrayField || field.$el === 'array' }">
 						<div>
 							<div class="field-label">
-								{{ field.label }}
+								<p class="grid-span-2 input-size line-height-1 inline-block">
+									{{ field.label }}
+								</p>
 								<span v-if="field.isArrayField">↳</span>
 								<Pill v-if="field.$el === 'array'" class="txt10 ms-05" round thin value="Array" />
 								<!-- <span v-if="field.$el === 'array'" class="array-parent-indicator">[Array]</span> -->
@@ -1577,7 +1591,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 								{{ getFieldDescription(field).description }}
 							</div>
 						</div>
-						<td class="fileColSelect">
+						<div class="fileColSelect">
 							<SelectInput
 								v-model="fieldMapping[field.id]"
 								icon="table_chart"
@@ -1586,7 +1600,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 								:disabled="field.disabled"
 								@change="handleSelectChange($event, field.id)"
 							/>
-						</td>
+						</div>
 						<div>
 							<!-- Default Value Input -->
 							<div class="default-value-container hideLabel">
@@ -1604,7 +1618,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 							/>
 						</div>
 						<div>
-							<div class="flex gap-05">
+							<div class="flex gap-05 my-05">
 								<Btn
 									v-tooltip="'Transform'"
 									thin
@@ -1634,34 +1648,40 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 		<!-- Transformation Modal -->
 		<Modal v-model:visible="showTransformDialog" title="Configure Transformations" width="800">
 			<div v-if="selectedTransformField">
-				<div class="flex space-between gap-1 mb-1">
+				<div class="flex space-between gap-1 mb-1 border-bottom pb-05 m_flex-wrap">
 					<p>Create transformations for <strong>{{ selectedTransformField.label }}</strong></p>
 					<Btn icon="auto_awesome" thin value="Autodetect" @click="autoPopulateTransformations(selectedTransformField.id)" />
 				</div>
-				<table>
-					<thead>
-						<tr>
-							<th>Source Value</th>
-							<th>Target Value</th>
-							<th>Action</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="(transform, index) in transformations[selectedTransformField.id] || []" :key="index">
-							<td>{{ transform.sourceValue }}</td>
-							<td>{{ transform.targetValue }}</td>
-							<td>
-								<Btn
-									v-tooltip="'Remove'"
-									thin
-									icon="delete"
-									color="red"
-									@click="removeTransformation(selectedTransformField.id, index)"
-								/>
-							</td>
-						</tr>
-						<tr>
-							<td>
+
+				<div>
+					<div class="grid grid-wrap-7 gap-1 bold pb-05 m_none">
+						<p class="grid-span-2">
+							Source Value
+						</p>
+						<p class="grid-span-4">
+							Target Value
+						</p>
+						<p>Action</p>
+					</div>
+					<div>
+						<div v-for="(transform, index) in transformations[selectedTransformField.id] || []" :key="index" class="grid grid-wrap-7 gap-1 align-items-center m_gap-025  m_pb-1-5">
+							<p class="grid-span-2 input-size line-height-1">
+								{{ transform.sourceValue }}
+							</p>
+							<p class="grid-span-4 input-size line-height-1 ellipsis-1">
+								{{ transform.targetValue }}
+							</p>
+							<Btn
+								v-tooltip="'Remove'"
+								class="mb-05"
+								thin
+								icon="delete"
+								color="red"
+								@click="removeTransformation(selectedTransformField.id, index)"
+							/>
+						</div>
+						<div class="grid grid-wrap-7 gap-1 align-items-center m_gap-025  m_pb-1-5">
+							<div class="grid-span-2">
 								<SelectInput
 									v-if="fieldMapping[selectedTransformField.id]"
 									v-model="selectedSourceValue"
@@ -1669,9 +1689,9 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 									:options="sourceValueOptions"
 									placeholder="Select source value"
 								/>
-								<input v-else v-model="selectedSourceValue" type="text" placeholder="Source value">
-							</td>
-							<td>
+								<TextInput v-else v-model="selectedSourceValue" type="text" placeholder="Source value" />
+							</div>
+							<div class="grid-span-4">
 								<SelectInput
 									v-if="selectedTransformField.options && selectedTransformField.options.length > 0"
 									v-model="selectedTargetValue"
@@ -1679,20 +1699,20 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 									:options="selectedTransformField.options"
 									placeholder="Select target value"
 								/>
-								<input v-else v-model="selectedTargetValue" type="text" placeholder="Target value">
-							</td>
-							<td>
-								<Btn
-									v-tooltip="'Add'"
-									thin
-									icon="add"
-									color="primary"
-									@click="addTransformation(selectedTransformField.id)"
-								/>
-							</td>
-						</tr>
-					</tbody>
-				</table>
+								<TextInput v-else v-model="selectedTargetValue" type="text" placeholder="Target value" />
+							</div>
+							<Btn
+								v-tooltip="'Add'"
+								class="mb-05"
+								thin
+								icon="add"
+								color="primary"
+								@click="addTransformation(selectedTransformField.id)"
+							/>
+						</div>
+					</div>
+				</div>
+
 				<div class="flex pt-05">
 					<Btn class="ms-auto" value="Close" @click="showTransformDialog = false" />
 				</div>
@@ -1799,20 +1819,21 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 		</Modal>
 
 		<!-- Preview Modal -->
-		<Modal v-model:visible="showPreviewModal" title="Data Preview & Edit" width="1200">
+		<Modal v-model:visible="showPreviewModal" title="Data Preview & Edit" width="90vw">
 			<div>
 				<Spreadsheet
 					v-model="previewData"
+					class="popupPreviewSpreadsheet"
 					:column-config="spreadsheetColumns"
 					allow-add-row
 				/>
 			</div>
 			<div>
-				<div>
+				<p class="mt-1">
 					Showing all {{ previewData.length }} records. You can edit values directly.
-				</div>
-				<div>
-					<Btn value="Cancel" @click="showPreviewModal = false" />
+				</p>
+				<div class="flex gap-1 mt-1 space-between">
+					<Btn flat thin value="Cancel" @click="showPreviewModal = false" />
 					<Btn value="Import Data" @click="processData()" />
 				</div>
 			</div>
@@ -1924,7 +1945,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 	color: var(--bgl-green);
 	line-height: 0;
 }
-.hideLabel label{
+.hideLabel label, .hideLabel .label{
 	font-size: 0 !important;
 }
 .mapping-table .selectinput-btn:disabled{
@@ -1934,4 +1955,8 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 .field-label{
 	--pill-height: 20px;
 }
+.popupPreviewSpreadsheet .spreadsheet{
+	width: 100%;
+	overflow: auto;
+}
 </style>

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

@@ -1,11 +1,7 @@
-export interface HilightJS {
-
+export interface HighlightJS {
 	highlight: (code: string, options: { language: string, ignoreIllegals: boolean }) => { value: string }
-
 	highlightAuto: (code: string) => { value: string }
-
-	getLanguage: (lang: string) => boolean
-
+	getLanguage: (name: string) => any
 }
 
 export const codeLanguages = {
@@ -33,7 +29,7 @@ export const codeLanguages = {
 	'brainfuck': 'Brainfuck',
 	'c': 'C',
 	'cal': 'C/AL',
-	'capnproto': 'Cap’n Proto',
+	'capnproto': 'Cap\'n Proto',
 	'ceylon': 'Ceylon',
 	'clean': 'Clean',
 	'clojure': 'Clojure',
@@ -203,4 +199,14 @@ export const codeLanguages = {
 	'html': 'HTML',
 }
 
-export type Language = keyof typeof codeLanguages
+export type Language = 'html' | 'css' | 'javascript' | 'typescript' | 'json' | 'markdown' | string
+
+export interface CodeEditorProps {
+	language?: Language
+	readonly?: boolean
+	modelValue?: string
+	autodetect?: boolean
+	ignoreIllegals?: boolean
+	label?: string
+	height?: string
+}

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

@@ -1,23 +1,8 @@
 <script setup lang="ts">
-import type { Language, HilightJS } from './CodeTypes'
-
-declare global {
-	interface Window {
-		hljs: HilightJS
-	}
-}
-import { appendStyle, appendScript } from '@bagelink/vue'
+import type { CodeEditorProps } from './CodeTypes'
 import { onMounted, ref, computed, watch } from 'vue'
+import { useHighlight } from './useHighlight'
 
-interface CodeEditorProps {
-	language?: Language
-	readonly?: boolean
-	modelValue?: string
-	autodetect?: boolean
-	ignoreIllegals?: boolean
-	label?: string
-	height?: string
-}
 // Props with default values
 const props = withDefaults(defineProps<CodeEditorProps>(), {
 	language: 'html',
@@ -33,8 +18,8 @@ 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)
+const { loaded, loadHighlight, highlightCode } = useHighlight()
+
 // Computed
 const maxHeight = computed(() => {
 	const h = props.height ?? '240px'
@@ -42,41 +27,14 @@ const maxHeight = computed(() => {
 })
 
 const formattedCode = computed(() => {
-	if (!hljs.value) return escapeHtml(code.value)
-
-	try {
-		const lang = props.language || ''
-
-		if (lang && !props.autodetect && !hljs.value.getLanguage(lang)) {
-			console.warn(`The language "${lang}" is not available.`)
-			return escapeHtml(code.value)
-		}
-
-		const result = props.autodetect
-			? hljs.value.highlightAuto(code.value)
-			: hljs.value.highlight(code.value, { language: lang, ignoreIllegals: props.ignoreIllegals })
-
-		return result.value || escapeHtml(code.value)
-	} catch (error) {
-		console.error('Highlighting error:', error)
-		return escapeHtml(code.value)
-	}
+	return highlightCode(
+		code.value,
+		props.language,
+		props.autodetect,
+		props.ignoreIllegals
+	)
 })
 
-// Methods
-function escapeHtml(unsafe: string) {
-	return unsafe.replace(/[&<>"']/g, (m) => {
-		const replacements: { [key: string]: string } = {
-			'&': '&amp;',
-			'<': '&lt;',
-			'>': '&gt;',
-			'"': '&quot;',
-			'\'': '&#039;'
-		}
-		return replacements[m] || ''
-	})
-}
-
 function handleInput(e: Event) {
 	const target = e.target as HTMLTextAreaElement
 	code.value = target.value
@@ -104,20 +62,7 @@ function handleTab(event: KeyboardEvent) {
 
 // Lifecycle
 onMounted(async () => {
-	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)
-	}
+	await loadHighlight()
 })
 
 // Watch for external modelValue changes

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

@@ -0,0 +1,76 @@
+import type { HighlightJS } from './CodeTypes'
+import { appendStyle, appendScript } from '@bagelink/vue'
+import { ref } from 'vue'
+
+// Extend the Window interface
+interface CustomWindow extends Window {
+	hljs: HighlightJS
+}
+declare const window: CustomWindow
+
+export function useHighlight() {
+	const hljs = ref<HighlightJS | null>(null)
+	const loaded = ref(false)
+
+	const loadHighlight = async () => {
+		if (loaded.value) return
+
+		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)
+		}
+	}
+
+	const escapeHtml = (unsafe: string) => {
+		return unsafe.replace(/[&<>"']/g, (m) => {
+			const replacements: { [key: string]: string } = {
+				'&': '&amp;',
+				'<': '&lt;',
+				'>': '&gt;',
+				'"': '&quot;',
+				'\'': '&#039;'
+			}
+			return replacements[m] || ''
+		})
+	}
+
+	const highlightCode = (code: string, language?: string, autodetect = true, ignoreIllegals = true) => {
+		if (!hljs.value) return escapeHtml(code)
+
+		try {
+			const lang = language || ''
+
+			if (lang && !autodetect && !hljs.value.getLanguage(lang)) {
+				console.warn(`The language "${lang}" is not available.`)
+				return escapeHtml(code)
+			}
+
+			const result = autodetect
+				? hljs.value.highlightAuto(code)
+				: hljs.value.highlight(code, { language: lang, ignoreIllegals })
+
+			return result.value || escapeHtml(code)
+		} catch (error) {
+			console.error('Highlighting error:', error)
+			return escapeHtml(code)
+		}
+	}
+
+	return {
+		hljs,
+		loaded,
+		loadHighlight,
+		escapeHtml,
+		highlightCode
+	}
+}