@bagelink/vue 1.2.107 → 1.2.111

package/src/components/ImportData.vue

@@ -308,9 +308,7 @@ function getAllFields(schema: any[]): any[] {
 
 			// Extract options if they exist in attrs
 			if (field.attrs && field.attrs.options && field.attrs.options.length > 0) {
-				// Add options from attrs to the field's options array
 				field.options = field.attrs.options
-				console.log(`Added options for field ${field.id}:`, field.options)
 			}
 
 			allFields.push(field)
@@ -335,11 +333,9 @@ function getAllFields(schema: any[]): any[] {
 						// Add the array field itself (phones, emails)
 						addFieldIfNew(child)
 
-						// Add the child fields of the array with qualified names
 						if (Array.isArray(child.attrs.schema)) {
 							child.attrs.schema.forEach((schemaItem: SchemaItem) => {
 								if (schemaItem && schemaItem.id && schemaItem.label) {
-									// Create a qualified field name for the array item
 									const qualifiedField = {
 										...schemaItem,
 										id: `${child.id}.${schemaItem.id}`,
@@ -347,7 +343,6 @@ function getAllFields(schema: any[]): any[] {
 										isArrayField: true
 									}
 
-									// Make sure to copy options if they exist
 									if (schemaItem.options) {
 										qualifiedField.options = schemaItem.options
 									} else if (schemaItem.attrs && schemaItem.attrs.options) {
@@ -359,7 +354,6 @@ function getAllFields(schema: any[]): any[] {
 							})
 						}
 					} else {
-						// Regular non-array field
 						addFieldIfNew(child)
 					}
 				}
@@ -552,7 +546,7 @@ function checkMappingComplete() {
 	// If no strictly required fields, we just need at least one mapping or default value
 	if (requiredFields.length === 0) {
 		mappingComplete.value = Object.keys(fieldMapping).some(key => !!fieldMapping[key])
-			|| Object.keys(defaultValues).length > 0
+		|| Object.keys(defaultValues).length > 0
 		return
 	}
 
@@ -878,7 +872,6 @@ function handleSelectChange(event: Event, fieldId: string) {
 const { addFile, browse, fileQueue } = useFileUpload()
 
 async function handleFilesUploaded() {
-	console.log('fileQueue', fileQueue.value)
 	file.value = fileQueue.value[0].file
 	if (!file.value) return
 	isLoading.value = true
@@ -911,22 +904,13 @@ function hasDefaultValue(fieldId: string): boolean {
 // Function to open transformation dialog
 function openTransformDialog(field: SchemaItem) {
 	try {
-		console.log('Opening transform dialog for field:', field.id, field)
-
-		// Make sure to set options property from attrs if needed
 		if (!field.options) {
 			field.options = []
 		}
 
 		if (field.attrs && field.attrs.options) {
-			console.log('Copying options from attrs for field:', field.id)
-			field.options = Array.isArray(field.attrs.options)
-				? field.attrs.options
-				: []
+			field.options = field.attrs.options
 		}
-
-		console.log('Field options after processing:', field.options)
-
 		selectedTransformField.value = field
 		if (!transformations[field.id]) {
 			transformations[field.id] = []
@@ -1052,28 +1036,6 @@ function autoPopulateTransformations(fieldId: string) {
 	}
 }
 
-// Add a debug function to log field options
-function debugFieldOptions() {
-	console.log('Checking all fields for options:')
-	schemaFields.value.forEach((field) => {
-		console.log(`Field ${field.id} (${field.label}):`, {
-			directOptions: field.options,
-			hasDirectOptions: field.options && field.options.length > 0,
-			attrOptions: field.attrs?.options,
-			hasAttrOptions: field.attrs && field.attrs.options && field.attrs.options.length > 0,
-			visibleButton: (field.options && field.options.length > 0) || (field.attrs && field.attrs.options && field.attrs.options.length > 0)
-		})
-	})
-}
-
-// Run debug function on schema load
-watchEffect(() => {
-	if (props.schema && props.schema.length > 0) {
-		console.log('Schema loaded, checking options')
-		debugFieldOptions()
-	}
-})
-
 // Function to detect date format from string
 function detectDateFormat(value: string): RegExp | null {
 	// Common date formats
@@ -1090,7 +1052,6 @@ function detectDateFormat(value: string): RegExp | null {
 			return format
 		}
 	}
-
 	return null
 }
 
@@ -1182,24 +1143,19 @@ function convertValueByType(value: any, dataType: string): any {
 	}
 }
 
-// Function to detect the most likely data type from a value
 function detectDataType(value: any): string {
 	if (value === null || value === undefined) {
 		return DATA_TYPES.STRING
 	}
-
 	if (typeof value === 'number' || (typeof value === 'string' && !Number.isNaN(Number(value)))) {
 		if (isExcelSerialDate(Number(value))) {
 			return DATA_TYPES.DATE
 		}
 		return DATA_TYPES.NUMBER
 	}
-
 	if (typeof value === 'boolean' || (typeof value === 'string' && ['true', 'false', 'yes', 'no'].includes(value.toLowerCase()))) {
 		return DATA_TYPES.BOOLEAN
 	}
-
-	// Check if it's a date
 	if (value instanceof Date) {
 		return DATA_TYPES.DATETIME
 	}
@@ -1554,16 +1510,16 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 </script>
 
 <template>
-	<div class="upload-data-container">
-		<h2 v-text="props.title || 'Upload and Map Data'" />
+	<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 hover">
-				<Icon name="upload_file" size="5" />
+			<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">
@@ -1579,118 +1535,109 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 		</div>
 
 		<!-- Step 2: Sheet selection and configuration -->
-		<div v-if="file && !isLoading && sheetNames.length > 0" class="config-section">
-			<div class="file-info mb-1">
-				<div class="file-chip">
-					{{ file.name }}
-				</div>
-				<Btn thin round value="Change File" @click="file = null" />
+		<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" />
+				<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" />
 			</div>
-			<SelectInput v-if="sheetNames.length > 1" v-model="selectedSheet" :options="sheetNames" label="Select Sheet" />
 
-			<div class="header-config">
-				<label>File has headers?</label>
-				<CheckInput v-model="hasHeaders" label="First row contains column names" />
-			</div>
-		</div>
+			<!-- Step 3: Field Mapping -->
+			<div v-if="file && !isLoading && fileHeaders.length > 0">
+				<!-- <h3 class="mt-0">
+					Map Fields
+				</h3> -->
+				<p class="label pb-1 border-bottom mb-1">
+					Match each required field to a column from your file, set default values, or configure transformations
+				</p>
 
-		<!-- Step 3: Field Mapping -->
-		<Card v-if="file && !isLoading && fileHeaders.length > 0">
-			<h3 class="mt-0">
-				Map Fields
-			</h3>
-			<p class="instructions">
-				Match each required field to a column from your file, set default values, or configure transformations
-			</p>
-
-			<div class="mapping-table">
-				<table class="tbl">
-					<thead>
-						<tr>
-							<th>Schema Field</th>
-							<th>File Column</th>
-							<th>Default Value</th>
-							<th>Data Type</th>
-							<th>Actions</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="field in schemaFields" :key="field.id" :class="{ 'array-field-row': field.isArrayField || field.$el === 'array' }">
-							<td>
-								<div class="field-label">
-									{{ field.label }}
-									<span v-if="field.isArrayField">↳</span>
-									<Pill v-if="field.$el === 'array'" outline thin value="Array" />
-									<!-- <span v-if="field.$el === 'array'" class="array-parent-indicator">[Array]</span> -->
-									<span v-if="isFieldRequired(field)">*</span>
-									<span v-if="getFieldDescription(field).isConditional">†</span>
-								</div>
-								<div v-if="field.disabled" class="field-disabled-reason">
-									{{ field.disabledReason }}
-								</div>
-								<div v-if="getFieldDescription(field).isConditional">
-									{{ getFieldDescription(field).description }}
-								</div>
-							</td>
-							<td>
-								<SelectInput
-									v-model="fieldMapping[field.id]"
-									:options="fileHeaders"
-									:required="isFieldRequired(field)"
-									:disabled="field.disabled"
-									@change="handleSelectChange($event, field.id)"
+				<div class="mapping-table">
+					<div class="grid grid-wrap-5 gap-1 bold pb-1">
+						<p>Schema Field</p>
+						<p>Column from File</p>
+						<p>Default Value</p>
+						<p>Data Type</p>
+						<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>
+							<div class="field-label">
+								{{ field.label }}
+								<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> -->
+								<span v-if="isFieldRequired(field)">*</span>
+								<span v-if="getFieldDescription(field).isConditional">†</span>
+							</div>
+							<div v-if="field.disabled" class="field-disabled-reason">
+								{{ field.disabledReason }}
+							</div>
+							<div v-if="getFieldDescription(field).isConditional">
+								{{ getFieldDescription(field).description }}
+							</div>
+						</div>
+						<td class="fileColSelect">
+							<SelectInput
+								v-model="fieldMapping[field.id]"
+								icon="table_chart"
+								:options="fileHeaders"
+								:required="isFieldRequired(field)"
+								:disabled="field.disabled"
+								@change="handleSelectChange($event, field.id)"
+							/>
+						</td>
+						<div>
+							<!-- Default Value Input -->
+							<div class="default-value-container hideLabel">
+								{{ initDefaultValue(field.id) }}
+								<component
+									:is="renderField(getFieldWithDefaults(field))"
 								/>
-							</td>
-							<td>
-								<!-- Default Value Input -->
-								<div class="default-value-container">
-									{{ initDefaultValue(field.id) }}
-									<component
-										:is="renderField(getFieldWithDefaults(field))"
-									/>
-								</div>
-							</td>
-							<td>
-								<SelectInput
-									v-model="fieldDataTypes[field.id]"
-									:options="dataTypeOptions"
-									:disabled="!fieldMapping[field.id] && !defaultValues[field.id]"
+							</div>
+						</div>
+						<div>
+							<SelectInput
+								v-model="fieldDataTypes[field.id]"
+								:options="dataTypeOptions"
+								:disabled="!fieldMapping[field.id] && !defaultValues[field.id]"
+							/>
+						</div>
+						<div>
+							<div class="flex gap-05">
+								<Btn
+									v-tooltip="'Transform'"
+									thin
+									:disabled="field.disabled"
+									icon="transform"
+									@click="openTransformDialog(field)"
 								/>
-							</td>
-							<td>
-								<div class="action-buttons-cell">
-									<Btn
-										v-tooltip="'Transform'"
-										thin
-										:disabled="field.disabled"
-										icon="transform"
-										@click="openTransformDialog(field)"
-									/>
-									<Btn v-if="field.$el === 'array'" v-tooltip="'Related File'" thin icon="attach_file" :disabled="field.disabled" @click="openRelatedDialog(field)" />
-								</div>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
+								<Btn v-if="field.$el === 'array'" v-tooltip="'Related File'" thin icon="attach_file" :disabled="field.disabled" @click="openRelatedDialog(field)" />
+							</div>
+						</div>
+					</div>
+				</div>
 
-			<div v-if="mappingComplete" class="action-buttons">
-				<Btn @click="showPreview">
-					Preview Data
-				</Btn>
-			</div>
-			<div v-else class="action-buttons">
-				<div class="mapping-incomplete-message">
-					Please map the required fields to continue
+				<div v-if="mappingComplete" class="action-buttons">
+					<Btn @click="showPreview">
+						Preview Data
+					</Btn>
+				</div>
+				<div v-else class="action-buttons">
+					<div class="mapping-incomplete-message">
+						Please map the required fields to continue
+					</div>
 				</div>
 			</div>
-		</Card>
+		</div>
 
 		<!-- Transformation Modal -->
 		<Modal v-model:visible="showTransformDialog" title="Configure Transformations" width="800">
 			<div v-if="selectedTransformField">
-				<p>Create transformations for <strong>{{ selectedTransformField.label }}</strong></p>
-				<Btn icon="auto_awesome" thin value="Autodetect" @click="autoPopulateTransformations(selectedTransformField.id)" />
+				<div class="flex space-between gap-1 mb-1">
+					<p>Create transformations for <strong>{{ selectedTransformField.label }}</strong></p>
+					<Btn icon="auto_awesome" thin value="Autodetect" @click="autoPopulateTransformations(selectedTransformField.id)" />
+				</div>
 				<table>
 					<thead>
 						<tr>
@@ -1746,22 +1693,26 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						</tr>
 					</tbody>
 				</table>
-				<Btn thin value="Close" @click="showTransformDialog = false" />
+				<div class="flex pt-05">
+					<Btn class="ms-auto" value="Close" @click="showTransformDialog = false" />
+				</div>
 			</div>
 		</Modal>
 
 		<!-- Related File Modal -->
 		<Modal v-model:visible="showRelatedDialog" title="Configure Related Data" width="900">
 			<div v-if="selectedRelationField">
-				<p>Upload a file with related data for {{ selectedRelationField.label }}</p>
+				<p class="pb-05">
+					Upload a file with related data for {{ selectedRelationField.label }}
+				</p>
 
-				<div v-if="!relatedFiles[selectedRelationField.id]">
+				<div v-if="!relatedFiles[selectedRelationField.id]" class="mb-05">
 					<DragOver
 						accept=".csv,.xls,.xlsx"
 						@addFiles="(files) => { if (files[0]) processRelatedFile(selectedRelationField!.id, files[0]) }"
 					>
-						<Card class="flex flex-column items-center justify-center outline-dashed outline-3 hover">
-							<Icon name="upload_file" size="5" />
+						<Card class="flex flex-column items-center justify-center outline-dashed outline-3 hover bg-input">
+							<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">
@@ -1841,7 +1792,9 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						</table>
 					</div>
 				</div>
-				<Btn value="Close" @click="showRelatedDialog = false" />
+				<div class="flex pt-05">
+					<Btn class="ms-auto" value="Close" @click="showRelatedDialog = false" />
+				</div>
 			</div>
 		</Modal>
 
@@ -1960,5 +1913,25 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</div>
 			</div>
 		</Modal>
-	</div>
+	</Card>
 </template>
+
+<style>
+.fileColSelect{
+	--input-bg: var(--bgl-green-light);
+}
+.fileColSelect .bgl_icon-font{
+	color: var(--bgl-green);
+	line-height: 0;
+}
+.hideLabel label{
+	font-size: 0 !important;
+}
+.mapping-table .selectinput-btn:disabled{
+	background: var(--input-bg) !important;
+	cursor: not-allowed !important;
+}
+.field-label{
+	--pill-height: 20px;
+}
+</style>

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { UploadInputProps } from '@bagelink/vue'
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, Card, Image, pathKeyToURL } from '@bagelink/vue'
+import { watchDebounced } from '@vueuse/core'
+import { toValue } from 'vue'
 import { useFileUpload } from './useFileUpload'
 
 const props = withDefaults(defineProps<UploadInputProps>(), {
@@ -19,6 +21,7 @@ const {
 	fileToUrl,
 	addFile,
 	browse,
+	pk
 } = useFileUpload({
 	disabled: props.disabled,
 	dirPath: props.dirPath,
@@ -43,9 +46,24 @@ async function handleDrop(e: DragEvent) {
 	emit('addFileStart')
 	addFile(e.dataTransfer?.files)
 	await flushQueue()
-	emit('update:modelValue', pathKeys.value)
+	// emit('update:modelValue', pathKeys.value)
 	isDragOver = false
 }
+
+watchDebounced(() => toValue(pk), (value) => {
+	if (props.multiple) emit('update:modelValue', value)
+	else emit('update:modelValue', value[0] || undefined)
+}, { deep: true, immediate: true })
+
+watchDebounced(() => props.modelValue, (newVal, oldVal) => {
+	if (`${newVal}` === `${oldVal}`) return
+	if (newVal === undefined) return
+	if (Array.isArray(newVal)) {
+		pk.value = newVal
+	} else {
+		pk.value = [newVal]
+	}
+}, { immediate: true, debounce: 500 })
 </script>
 
 <template>

package/src/utils/BagelFormUtils.ts

@@ -1,5 +1,4 @@
 import type { ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, Field, IconType, InputBagelField, Option, Path, SchemaChild, SelectBagelField, UploadInputProps } from '@bagelink/vue'
-// import type { UploadInputProps } from '../components/form/inputs/Upload/upload.types'
 
 interface InputOptions<T, P extends Path<T>> extends Partial<BaseBagelField<T, P>> {
 	defaultValue?: string | number

package/dist/types/timeago.d.ts

@@ -1,23 +0,0 @@
-export interface TimeUnit {
-    singular: string;
-    plural: string;
-}
-export type TranslationValue = string | TimeUnit;
-export interface LanguageTranslations {
-    [key: string]: TranslationValue;
-}
-export type AvailableTimeLanguages = 'en' | 'es' | 'fr' | 'he';
-export type DayFormatTypes = 'DD' | 'DDD' | 'DDDD';
-export type MonthFormatTypes = 'MM' | 'MMM' | 'MMMM';
-export type YearFormatTypes = 'YY' | 'YYYY';
-export type HourFormatTypes = 'HH';
-export type MinuteFormatTypes = 'mm';
-export type SecondFormatTypes = 'ss';
-export type MillisecondFormatTypes = 'sss';
-export type AmPmFormatTypes = 'AmPm';
-export type DateFormatSeparatorTypes = '/' | '-' | ' ' | ':' | '.';
-export type CommonDateFormats = `${DayFormatTypes}${DateFormatSeparatorTypes}${MonthFormatTypes}${DateFormatSeparatorTypes}${YearFormatTypes}` | 'DD.MM.YY' | 'DD.MM.YYYY' | 'DD/MM/YY' | 'DD/MM/YYYY' | 'MM.DD.YY' | 'MM.DD.YYYY' | 'MM/DD/YY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'YY-MM-DD' | 'DD MMM YYYY' | 'DD MMMM YYYY' | 'DDD, DD MMM' | 'DDDD, DD MMMM' | 'MMM DD' | 'MMMM DD';
-export type CommonTimeFormats = 'HH:mm' | 'HH:mm:ss' | 'HH:mm:ss:sss' | 'HH:MM' | 'HH:mm AmPm';
-export type CommonDateTimeFormats = `${CommonDateFormats} ${CommonTimeFormats}` | `${CommonTimeFormats}, ${CommonDateFormats}` | 'YYYY-MM-DD HH:MM';
-export type DateTimeAcceptedFormats = CommonDateFormats | CommonTimeFormats | CommonDateTimeFormats;
-//# sourceMappingURL=timeago.d.ts.map

package/dist/types/timeago.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"timeago.d.ts","sourceRoot":"","sources":["../../src/types/timeago.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEhD,MAAM,WAAW,oBAAoB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAA;CAC/B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAClD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AACpD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,CAAA;AAC3C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAA;AAC1C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAA;AAEpC,MAAM,MAAM,wBAAwB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAGlE,MAAM,MAAM,iBAAiB,GAC1B,GAAG,cAAc,GAAG,wBAAwB,GAAG,gBAAgB,GAAG,wBAAwB,GAAG,eAAe,EAAE,GAC9G,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,YAAY,GAAG,UAAU,GACzB,aAAa,GAAG,cAAc,GAC9B,aAAa,GAAG,eAAe,GAC/B,QAAQ,GAAG,SAAS,CAAA;AAEvB,MAAM,MAAM,iBAAiB,GAC1B,OAAO,GAAG,UAAU,GAAG,cAAc,GACrC,OAAO,GACP,YAAY,CAAA;AAGf,MAAM,MAAM,qBAAqB,GAC9B,GAAG,iBAAiB,IAAI,iBAAiB,EAAE,GAC3C,GAAG,iBAAiB,KAAK,iBAAiB,EAAE,GAC5C,kBAAkB,CAAA;AAGrB,MAAM,MAAM,uBAAuB,GAChC,iBAAiB,GACjB,iBAAiB,GACjB,qBAAqB,CAAA"}