@bagelink/vue 1.6.47 → 1.6.51

package/src/components/ImportData.vue

@@ -130,7 +130,7 @@ const { renderField } = useSchemaField<any>({
 	mode: 'form',
 	getFormData: () => formData.value,
 	onUpdateModelValue: (field: Field<any>, value: any) => {
-		if (!field.id) {return}
+		if (!field.id) { return }
 
 		if (field.id.includes('.')) {
 			const [parentId, childId] = field.id.split('.')
@@ -145,16 +145,16 @@ const { renderField } = useSchemaField<any>({
 })
 
 function getUniqueSourceValues(fieldId: string): any[] {
-	if (!fieldMapping[fieldId] || !fileData.value || 0 === fileData.value.length) {
+	if (!fieldMapping[fieldId] || !fileData.value || fileData.value.length === 0) {
 		return []
 	}
 	const allValues = fileData.value
 		.map(row => row[fieldMapping[fieldId]])
-		.filter(value => value !== undefined && null !== value && '' !== value)
+		.filter(value => value !== undefined && value !== null && value !== '')
 	const uniqueValues = [...new Set(allValues)]
 
 	return uniqueValues.filter((value) => {
-		if (!transformations[fieldId] || 0 === transformations[fieldId].length) {
+		if (!transformations[fieldId] || transformations[fieldId].length === 0) {
 			return true
 		}
 		return !transformations[fieldId].some(t => t.sourceValue == value || t.sourceValue === value.toString()
@@ -177,17 +177,17 @@ const sourceValueOptions = computed(() => {
 })
 
 function findMatchingTargetValue(sourceValue: string, options: Option[]): string | null {
-	if (!sourceValue || !options || !Array.isArray(options) || 0 === options.length) {return null}
+	if (!sourceValue || !options || !Array.isArray(options) || options.length === 0) { return null }
 	const lowerSourceValue = String(sourceValue).toLowerCase().trim()
 	const exactMatch = options.find((option) => {
-		const optionObj = 'object' === typeof option && null !== option ? option : { value: String(option), label: String(option) }
-		if (!optionObj) {return false}
+		const optionObj = typeof option === 'object' && option !== null ? option : { value: String(option), label: String(option) }
+		if (!optionObj) { return false }
 		const optionLabel = `${optionObj.label}`.toLowerCase().trim()
 		return optionLabel === lowerSourceValue
 	})
 
 	if (exactMatch) {
-		const optionObj = 'object' === typeof exactMatch && null !== exactMatch 
+		const optionObj = typeof exactMatch === 'object' && exactMatch !== null
 			? exactMatch
 			: { value: String(exactMatch), label: String(exactMatch) }
 		return String(optionObj.value)
@@ -195,8 +195,8 @@ function findMatchingTargetValue(sourceValue: string, options: Option[]): string
 
 	// Try more flexible matching if exact match fails
 	const fuzzyMatch = options.find((option) => {
-		const optionObj = 'object' === typeof option && null !== option ? option : { value: String(option), label: String(option) }
-		if (!optionObj || 'string' !== typeof optionObj.label) {return false}
+		const optionObj = typeof option === 'object' && option !== null ? option : { value: String(option), label: String(option) }
+		if (!optionObj || typeof optionObj.label !== 'string') { return false }
 
 		const optionLabel = `${optionObj.label}`.toLowerCase().trim()
 
@@ -204,7 +204,7 @@ function findMatchingTargetValue(sourceValue: string, options: Option[]): string
 	})
 
 	if (fuzzyMatch) {
-		const optionObj = 'object' === typeof fuzzyMatch && null !== fuzzyMatch 
+		const optionObj = typeof fuzzyMatch === 'object' && fuzzyMatch !== null
 			? fuzzyMatch
 			: { value: String(fuzzyMatch), label: String(fuzzyMatch) }
 		return String(optionObj.value)
@@ -231,7 +231,7 @@ function addTransformation(fieldId: string) {
 		const existingIndex = transformations[fieldId].findIndex(t => t.sourceValue === selectedSourceValue.value
 		)
 
-		if (0 <= existingIndex) {
+		if (existingIndex >= 0) {
 			transformations[fieldId][existingIndex].targetValue = selectedTargetValue.value
 		} else {
 			transformations[fieldId].push({
@@ -246,7 +246,7 @@ function addTransformation(fieldId: string) {
 }
 
 function getAllFields(schema: any[]): any[] {
-	if (!schema || !Array.isArray(schema)) {return []}
+	if (!schema || !Array.isArray(schema)) { return [] }
 
 	const allFields: any[] = []
 	const seenIds = new Set() // Keep track of field IDs we've already added
@@ -262,7 +262,7 @@ function getAllFields(schema: any[]): any[] {
 			}
 
 			// Extract options if they exist in attrs
-			if (field.attrs && field.attrs.options && 0 < field.attrs.options.length) {
+			if (field.attrs && field.attrs.options && field.attrs.options.length > 0) {
 				field.options = field.attrs.options
 			}
 
@@ -279,7 +279,7 @@ function getAllFields(schema: any[]): any[] {
 		if (item && item.children && Array.isArray(item.children)) {
 			item.children.forEach((child: any) => {
 				if (child && child.id && child.label) {
-					if ('array' === child.$el && child.attrs && child.attrs.schema) {
+					if (child.$el === 'array' && child.attrs && child.attrs.schema) {
 						addFieldIfNew(child)
 						if (Array.isArray(child.attrs.schema)) {
 							child.attrs.schema.forEach((schemaItem: SchemaItem) => {
@@ -318,9 +318,9 @@ function isFieldRequired(field: any): boolean {
 		return false
 	}
 
-	return (field.attrs && true === field.attrs.required)
-		|| (true === field.required)
-		|| (field.attrs && field.attrs.attrs && true === field.attrs.attrs.required)
+	return (field.attrs && field.attrs.required === true)
+		|| (field.required === true)
+		|| (field.attrs && field.attrs.attrs && field.attrs.attrs.required === true)
 }
 
 function getFieldDescription(field: any): { description: string, isConditional: boolean } {
@@ -353,7 +353,7 @@ async function parseFile(file: File) {
 }
 
 async function loadSheetData() {
-	if (!file.value || !selectedSheet.value) {return}
+	if (!file.value || !selectedSheet.value) { return }
 	isLoading.value = true
 	try {
 		const { headers, data } = await readSheetData(file.value, selectedSheet.value, hasHeaders.value)
@@ -376,7 +376,7 @@ function checkArrayFieldConflicts() {
 	Object.keys(fieldMapping).forEach((fieldId: string) => {
 		const field = schemaFields.value.find(f => f.id === fieldId)
 		if (field) {
-			if ('array' === field.$el) {
+			if (field.$el === 'array') {
 				mappedArrayParents.add(field.id)
 			} else if (field.isArrayField && field.parentField) {
 				if (!mappedArrayChildren.has(field.parentField)) {
@@ -396,7 +396,7 @@ function checkArrayFieldConflicts() {
 	}
 
 	for (const [parentId, childIds] of mappedArrayChildren.entries()) {
-		if (0 < childIds.size) {
+		if (childIds.size > 0) {
 			const parentField = schemaFields.value.find(f => f.id === parentId)
 			if (parentField) {
 				parentField.disabled = true
@@ -417,7 +417,7 @@ function resetMapping() {
 	})
 
 	// Try to auto-map fields based on similar names
-	if (0 < fileHeaders.value.length) {
+	if (fileHeaders.value.length > 0) {
 		schemaFields.value.forEach((field: any) => {
 			// Format variations of field id and label for comparison
 			const fieldIdCamel = formatString(field.id, 'camel')
@@ -462,22 +462,22 @@ function resetMapping() {
 }
 
 function checkMappingComplete() {
-	if (!file.value || (0 === Object.keys(fieldMapping).length && 0 === Object.keys(defaultValues).length)) {
+	if (!file.value || (Object.keys(fieldMapping).length === 0 && Object.keys(defaultValues).length === 0)) {
 		mappingComplete.value = false
 		return
 	}
 
 	const requiredFields = schemaFields.value.filter((field) => {
-		if (field.isArrayField && field.parentField) {return false}
+		if (field.isArrayField && field.parentField) { return false }
 
-		return (field.attrs && true === field.attrs.required)
-			|| (true === field.required)
-			|| (field.attrs && field.attrs.attrs && true === field.attrs.attrs.required)
+		return (field.attrs && field.attrs.required === true)
+			|| (field.required === true)
+			|| (field.attrs && field.attrs.attrs && field.attrs.attrs.required === true)
 	})
 
-	if (0 === requiredFields.length) {
+	if (requiredFields.length === 0) {
 		mappingComplete.value = Object.keys(fieldMapping).some(key => !!fieldMapping[key])
-			|| 0 < Object.keys(defaultValues).length
+			|| Object.keys(defaultValues).length > 0
 		return
 	}
 	mappingComplete.value = requiredFields.every(field => !!fieldMapping[field.id] || hasDefaultValue(field.id))
@@ -492,13 +492,13 @@ function showPreview() {
 		const mappedRow: MappedRow = {}
 
 		schemaFields.value.forEach((field) => {
-			if (field.isArrayField || 'array' === field.$el) {return}
+			if (field.isArrayField || field.$el === 'array') { return }
 			let value: any = null
 			let useDefault = false
 
 			if (fieldMapping[field.id] && sourceRow[fieldMapping[field.id]] !== undefined) {
 				value = sourceRow[fieldMapping[field.id]]
-				if ('' === value && defaultValues[field.id] !== undefined) {
+				if (value === '' && defaultValues[field.id] !== undefined) {
 					value = defaultValues[field.id]
 					useDefault = true
 				}
@@ -507,9 +507,9 @@ function showPreview() {
 				useDefault = true
 			}
 
-			if (null === value) {return}
+			if (value === null) { return }
 
-			if (!useDefault && transformations[field.id] && 0 < transformations[field.id].length) {
+			if (!useDefault && transformations[field.id] && transformations[field.id].length > 0) {
 				const transform = transformations[field.id].find(t => t.sourceValue == value || t.sourceValue === String(value)
 				)
 				if (transform) {
@@ -546,14 +546,14 @@ function showPreview() {
 
 		arrayChildFields.forEach((childField) => {
 			const [parentId, childId] = childField.id.split('.')
-			if (!parentId || !childId) {return}
+			if (!parentId || !childId) { return }
 
 			let value: any = null
 			let useDefault = false
 
 			if (fieldMapping[childField.id] && sourceRow[fieldMapping[childField.id]] !== undefined) {
 				value = sourceRow[fieldMapping[childField.id]]
-				if ('' === value && defaultValues[childField.id] !== undefined) {
+				if (value === '' && defaultValues[childField.id] !== undefined) {
 					value = defaultValues[childField.id]
 					useDefault = true
 				}
@@ -562,7 +562,7 @@ function showPreview() {
 				useDefault = true
 			}
 
-			if (null === value) {
+			if (value === null) {
 				return
 			}
 
@@ -570,7 +570,7 @@ function showPreview() {
 				mappedRow[parentId] = []
 			}
 
-			if (!useDefault && transformations[childField.id] && 0 < transformations[childField.id].length) {
+			if (!useDefault && transformations[childField.id] && transformations[childField.id].length > 0) {
 				const transform = transformations[childField.id].find(t => t.sourceValue == value || t.sourceValue === String(value)
 				)
 				if (transform) {
@@ -592,7 +592,7 @@ function showPreview() {
 			}
 
 			const parentKeyValue = sourceRow[parentKeyField[fieldId]]
-			if (!parentKeyValue) {return}
+			if (!parentKeyValue) { return }
 
 			if (!mappedRow[fieldId]) {
 				mappedRow[fieldId] = []
@@ -607,7 +607,7 @@ function showPreview() {
 
 				if (selectedRelationField.value?.attrs?.schema) {
 					selectedRelationField.value.attrs.schema.forEach((schemaItem: SchemaItem) => {
-						if (!schemaItem.id) {return}
+						if (!schemaItem.id) { return }
 
 						let value: any = null
 						let useDefault = false
@@ -615,7 +615,7 @@ function showPreview() {
 						if (relatedFileMappings[fieldId][schemaItem.id]
 							&& matchingRow[relatedFileMappings[fieldId][schemaItem.id]] !== undefined) {
 							value = matchingRow[relatedFileMappings[fieldId][schemaItem.id]]
-							if ('' === value && relatedDefaultValues[fieldId][schemaItem.id] !== undefined) {
+							if (value === '' && relatedDefaultValues[fieldId][schemaItem.id] !== undefined) {
 								value = relatedDefaultValues[fieldId][schemaItem.id]
 								useDefault = true
 							}
@@ -624,11 +624,11 @@ function showPreview() {
 							useDefault = true
 						}
 
-						if (null === value) {return}
+						if (value === null) { return }
 
 						if (!useDefault
 							&& relatedTransformations[fieldId][schemaItem.id]
-							&& 0 < relatedTransformations[fieldId][schemaItem.id].length) {
+							&& relatedTransformations[fieldId][schemaItem.id].length > 0) {
 							const transform = relatedTransformations[fieldId][schemaItem.id].find(t => t.sourceValue == value || t.sourceValue === String(value)
 							)
 							if (transform) {
@@ -644,16 +644,16 @@ function showPreview() {
 					})
 				}
 
-				if (0 < Object.keys(mappedItem).length) {
+				if (Object.keys(mappedItem).length > 0) {
 					mappedRow[fieldId].push(mappedItem)
 				}
 			})
 		})
 
 		const hasData = Object.values(mappedRow).some((value) => {
-			if (null === value || value === undefined) {return false}
-			if ('' === value) {return false}
-			if (Array.isArray(value) && 0 === value.length) {return false}
+			if (value === null || value === undefined) { return false }
+			if (value === '') { return false }
+			if (Array.isArray(value) && value.length === 0) { return false }
 			return true
 		})
 
@@ -669,7 +669,7 @@ function showPreview() {
 function createSpreadsheetColumns() {
 	return schemaFields.value
 		.filter((field) => {
-			return 'array' !== field.$el
+			return field.$el !== 'array'
 		})
 		.map((field) => {
 			return {
@@ -682,12 +682,12 @@ function createSpreadsheetColumns() {
 
 function formatArrayChildValue(value: any, row: any, fieldId: string): string {
 	const field = schemaFields.value.find(f => f.id === fieldId)
-	if (!field || !field.isArrayField || !field.parentField) {return value}
+	if (!field || !field.isArrayField || !field.parentField) { return value }
 
 	const [parentId, childId] = fieldId.split('.')
 	const parentArray = row[parentId]
 
-	if (Array.isArray(parentArray) && 0 < parentArray.length) {
+	if (Array.isArray(parentArray) && parentArray.length > 0) {
 		return parentArray
 			.map(item => item[childId])
 			.filter(val => val !== undefined)
@@ -717,7 +717,7 @@ function updateFieldMapping(fieldId: string, value: string) {
 		fieldMapping[fieldId] = value
 		const field = schemaFields.value.find(f => f.id === fieldId)
 		if (field) {
-			if ('array' === field.$el) {
+			if (field.$el === 'array') {
 				const childFields = schemaFields.value.filter(f => f.parentField === field.id)
 				childFields.forEach((child) => {
 					child.disabled = true
@@ -747,7 +747,7 @@ function handleSelectChange(event: Event, fieldId: string) {
 
 async function handleFilesUploaded(files: FileList) {
 	file.value = files[0]
-	if (!file.value) {return}
+	if (!file.value) { return }
 	isLoading.value = true
 
 	try {
@@ -767,8 +767,8 @@ watchEffect(() => {
 
 function hasDefaultValue(fieldId: string): boolean {
 	return defaultValues[fieldId] !== undefined
-		&& null !== defaultValues[fieldId]
-		&& '' !== defaultValues[fieldId]
+		&& defaultValues[fieldId] !== null
+		&& defaultValues[fieldId] !== ''
 }
 
 function openTransformDialog(field: SchemaItem) {
@@ -803,14 +803,14 @@ function openRelatedDialog(field: SchemaItem) {
 }
 
 async function processRelatedFile(fieldId: string, files: File[] | FileList) {
-	if (!files) {return}
+	if (!files) { return }
 	const file = files[0]
 
 	relatedFiles[fieldId] = file
 
 	try {
 		const sheets = await getSheetNames(file)
-		const selectedSheet = 0 < sheets.length ? sheets[0] : ''
+		const selectedSheet = sheets.length > 0 ? sheets[0] : ''
 
 		const { data } = await readSheetData(file, selectedSheet, true)
 		relatedFileData[fieldId] = data
@@ -833,7 +833,7 @@ function autoPopulateTransformations(fieldId: string) {
 
 		let fieldOptions = field.options || (field.attrs && field.attrs.options)
 
-		if (!fieldMapping[fieldId] || !fileData.value || 0 === fileData.value.length) {
+		if (!fieldMapping[fieldId] || !fileData.value || fileData.value.length === 0) {
 			console.warn('No data or mapping found for field:', fieldId)
 			return
 		}
@@ -865,7 +865,7 @@ function autoPopulateTransformations(fieldId: string) {
 				const existingIndex = transformations[fieldId].findIndex(t => t.sourceValue === strSourceValue
 				)
 
-				if (0 <= existingIndex) {
+				if (existingIndex >= 0) {
 					transformations[fieldId][existingIndex].targetValue = matchedValue
 				} else {
 					transformations[fieldId].push({
@@ -881,7 +881,7 @@ function autoPopulateTransformations(fieldId: string) {
 			}
 		})
 
-		if (0 === matchCount) {
+		if (matchCount === 0) {
 			alert(`No automatic matches found. Try creating transformations manually.`)
 		} else {
 			alert(`Automatically created ${matchCount} transformations by matching source values to target labels.\n\n${unmatchedValues.length} values could not be automatically matched.`)
@@ -910,7 +910,7 @@ function detectDateFormat(value: string): RegExp | null {
 }
 
 function parseDate(value: string): Date | null {
-	if (!value) {return null}
+	if (!value) { return null }
 
 	const isoDate = new Date(value)
 	if (!Number.isNaN(isoDate.getTime())) {
@@ -921,7 +921,7 @@ function parseDate(value: string): Date | null {
 		if (/^\d{2}\/\d{2}\/\d{4}$/.test(value)) {
 			const [month, day, year] = value.split('/').map(Number)
 			return new Date(year, month - 1, day)
-		}if (/^\d{2}\.\d{2}\.\d{4}$/.test(value)) {
+		} if (/^\d{2}\.\d{2}\.\d{4}$/.test(value)) {
 			const [day, month, year] = value.split('.').map(Number)
 			return new Date(year, month - 1, day)
 		} else if (/^\d{1,2}\s[a-z]{3,9}\s\d{4}$/i.test(value)) {
@@ -933,7 +933,7 @@ function parseDate(value: string): Date | null {
 }
 
 function convertValueByType(value: any, dataType: string): any {
-	if (null === value || value === undefined || '' === value) {
+	if (value === null || value === undefined || value === '') {
 		return null
 	}
 	try {
@@ -947,11 +947,11 @@ function convertValueByType(value: any, dataType: string): any {
 			}
 
 			case DATA_TYPES.BOOLEAN:
-				if ('boolean' === typeof value) {return value}
-				if ('string' === typeof value) {
+				if (typeof value === 'boolean') { return value }
+				if (typeof value === 'string') {
 					const lowercased = value.toLowerCase().trim()
-					if (['true', 'yes', '1', 'on'].includes(lowercased)) {return true}
-					if (['false', 'no', '0', 'off'].includes(lowercased)) {return false}
+					if (['true', 'yes', '1', 'on'].includes(lowercased)) { return true }
+					if (['false', 'no', '0', 'off'].includes(lowercased)) { return false }
 				}
 				return Boolean(value)
 			case DATA_TYPES.DATE:
@@ -960,7 +960,7 @@ function convertValueByType(value: any, dataType: string): any {
 					const date = excelSerialDateToJSDate(value)
 					return formatDate(date, dataType === DATA_TYPES.DATETIME)
 				}
-				if ('string' === typeof value) {
+				if (typeof value === 'string') {
 					const dateObj = parseDate(value)
 					if (dateObj) {
 						return formatDate(dateObj, dataType === DATA_TYPES.DATETIME)
@@ -982,23 +982,23 @@ function convertValueByType(value: any, dataType: string): any {
 }
 
 function detectDataType(value: any): string {
-	if (null === value || value === undefined) {
+	if (value === null || value === undefined) {
 		return DATA_TYPES.STRING
 	}
-	if ('number' === typeof value || ('string' === typeof value && !Number.isNaN(Number(value)))) {
+	if (typeof value === 'number' || (typeof value === 'string' && !Number.isNaN(Number(value)))) {
 		if (isExcelSerialDate(Number(value))) {
 			return DATA_TYPES.DATE
 		}
 		return DATA_TYPES.NUMBER
 	}
-	if ('boolean' === typeof value || ('string' === typeof value && ['true', 'false', 'yes', 'no'].includes(value.toLowerCase()))) {
+	if (typeof value === 'boolean' || (typeof value === 'string' && ['true', 'false', 'yes', 'no'].includes(value.toLowerCase()))) {
 		return DATA_TYPES.BOOLEAN
 	}
 	if (value instanceof Date) {
 		return DATA_TYPES.DATETIME
 	}
 
-	if ('string' === typeof value) {
+	if (typeof value === 'string') {
 		if (detectDateFormat(value) || !Number.isNaN(new Date(value).getTime())) {
 			return DATA_TYPES.DATE
 		}
@@ -1012,9 +1012,9 @@ function guessDataTypes(): void {
 			const sampleValues = fileData.value
 				.slice(0, 5)
 				.map(row => row[fieldMapping[field.id]])
-				.filter(value => value !== undefined && null !== value && '' !== value)
+				.filter(value => value !== undefined && value !== null && value !== '')
 
-			if (0 < sampleValues.length) {
+			if (sampleValues.length > 0) {
 				const types = sampleValues.map(detectDataType)
 				const typeCount: Record<string, number> = {}
 
@@ -1077,19 +1077,19 @@ function openRelatedTransformDialog(parentId: string, field: SchemaItem) {
 function getRelatedUniqueSourceValues(parentId: string, fieldId: string): any[] {
 	if (!relatedFileMappings[parentId][fieldId]
 		|| !relatedFileData[parentId]
-		|| 0 === relatedFileData[parentId].length) {
+		|| relatedFileData[parentId].length === 0) {
 		return []
 	}
 
 	const allValues = relatedFileData[parentId]
 		.map(row => row[relatedFileMappings[parentId][fieldId]])
-		.filter(value => value !== undefined && null !== value && '' !== value)
+		.filter(value => value !== undefined && value !== null && value !== '')
 
 	const uniqueValues = [...new Set(allValues)]
 
 	return uniqueValues.filter((value) => {
 		if (!relatedTransformations[parentId][fieldId]
-			|| 0 === relatedTransformations[parentId][fieldId].length) {
+			|| relatedTransformations[parentId][fieldId].length === 0) {
 			return true
 		}
 		return !relatedTransformations[parentId][fieldId].some(t => t.sourceValue == value || t.sourceValue === value.toString()
@@ -1127,7 +1127,7 @@ function addRelatedTransformation(parentId: string, fieldId: string) {
 			t => t.sourceValue === selectedRelatedSourceValue.value
 		)
 
-		if (0 <= existingIndex) {
+		if (existingIndex >= 0) {
 			relatedTransformations[parentId][fieldId][existingIndex].targetValue = selectedRelatedTargetValue.value
 		} else {
 			relatedTransformations[parentId][fieldId].push({
@@ -1160,7 +1160,7 @@ function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 
 		if (!relatedFileMappings[parentId][fieldId]
 			|| !relatedFileData[parentId]
-			|| 0 === relatedFileData[parentId].length) {
+			|| relatedFileData[parentId].length === 0) {
 			console.warn('No data or mapping found for related field:', fieldId)
 			return
 		}
@@ -1198,7 +1198,7 @@ function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 					t => t.sourceValue === strSourceValue
 				)
 
-				if (0 <= existingIndex) {
+				if (existingIndex >= 0) {
 					// Update existing transformation
 					relatedTransformations[parentId][fieldId][existingIndex].targetValue = matchedValue
 				} else {
@@ -1215,7 +1215,7 @@ function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 				unmatchedValues.push(strSourceValue)
 			}
 		})
-		if (0 === matchCount) {
+		if (matchCount === 0) {
 			alert(`No automatic matches found. Try creating transformations manually.`)
 		} else {
 			alert(`Automatically created ${matchCount} transformations by matching source values to target labels.\n\n${unmatchedValues.length} values could not be automatically matched.`)

package/src/components/ListItem.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { IconType } from '@bagelink/vue'
 import { Avatar, Icon } from '@bagelink/vue'
+import { computed } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -30,25 +31,25 @@ const props = withDefaults(
 	}
 )
 
-const isComponent = $computed(() => {
-	if (props.to) { return 'router-link' }
-	if (props.href) { return 'a' }
-	if (props.onClick) { return 'button' }
+const isComponent = computed(() => {
+	if (props.to !== undefined && props.to !== '') { return 'router-link' }
+	if (props.href !== undefined && props.href !== '') { return 'a' }
+	if (props.onClick !== undefined) { return 'button' }
 	return 'div'
 })
 
-const isClickable = $computed(() => {
-	return props.to || props.href || props.onClick
+const isClickable = computed(() => {
+	return (props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== '') || (props.onClick !== undefined)
 })
 
-const bind = $computed(() => {
+const bind = computed(() => {
 	const obj: { [key: string]: any } = {}
-	if (props.to) { obj.to = props.to }
-	else if (props.href) { obj.href = props.href }
-	if (props.target && (props.to || props.href)) { obj.target = props.target }
+	if (props.to !== undefined && props.to !== '') { obj.to = props.to }
+	else if (props.href !== undefined && props.href !== '') { obj.href = props.href }
+	if (props.target !== undefined && props.target !== undefined && ((props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== ''))) { obj.target = props.target }
 
 	obj.class = {
-		'notClickable': !(props.to || props.onClick),
+		'notClickable': !((props.to !== undefined && props.to !== '') || (props.onClick !== undefined)),
 		'no-border-list': props.flat,
 	}
 	if (props.disabled) { obj.disabled = true }
@@ -80,7 +81,10 @@ const bind = $computed(() => {
 					{{ title }}
 					<slot />
 				</p>
-				<p v-if="subtitle" class="txt12 m-0 m-0 py-0 ps-0 pe-1-5 opacity-7 me-2" :class="{ 'ellipsis-1': ellipsis }">
+				<p
+					v-if="subtitle" class="txt12 m-0 m-0 py-0 ps-0 pe-1-5 opacity-7 me-2"
+					:class="{ 'ellipsis-1': ellipsis }"
+				>
 					{{ subtitle }}
 					<slot name="subtitle" />
 				</p>
@@ -89,7 +93,10 @@ const bind = $computed(() => {
 		</component>
 		<slot name="end">
 			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
-			<p v-if="end" class="txt12 m-0 py-0 ps-0 pe-1-5 opacity-7 " :class="{ 'ellipsis-1': ellipsis }" v-text="end" />
+			<p
+				v-if="end" class="txt12 m-0 py-0 ps-0 pe-1-5 opacity-7 " :class="{ 'ellipsis-1': ellipsis }"
+				v-text="end"
+			/>
 		</slot>
 	</div>
 </template>

package/src/components/Loading.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SizeUnit, SizeType } from '../types/BtnOptions'
+import { computed } from 'vue'
 import { standardSize } from '../utils/sizeParsing'
 
 type LoadingType = 'ring' | 'ellipsis' | 'bar'
@@ -14,21 +15,21 @@ const { type: theme = 'ring', size = 50, thickness, duration = 1.2, color, progr
 }>()
 
 // Computed Values
-const computedSize = $computed(() => standardSize(size))
-const animationDuration = $computed(() => `${duration}s`)
-const computedBorder = $computed(() => {
-	const borderValue = thickness ?? Math.max(Number.parseInt(computedSize, 10) / 9, 2)
+const computedSize = computed(() => standardSize(size))
+const animationDuration = computed(() => `${duration}s`)
+const computedBorder = computed(() => {
+	const borderValue = thickness ?? Math.max(Number.parseInt(computedSize.value, 10) / 9, 2)
 	return standardSize(borderValue)
 })
 
 // SVG progress calculations
-const svgStrokeWidth = $computed(() => {
-	const borderNumeric = Number.parseFloat(computedBorder)
-	const sizeNumeric = Number.parseFloat(computedSize)
+const svgStrokeWidth = computed(() => {
+	const borderNumeric = Number.parseFloat(computedBorder.value)
+	const sizeNumeric = Number.parseFloat(computedSize.value)
 	return Math.round((borderNumeric / sizeNumeric) * 100) * 0.9
 })
-const svgRadius = $computed(() => 50 - (svgStrokeWidth / 2))
-const svgCircumference = $computed(() => Math.PI * 2 * svgRadius)
+const svgRadius = computed(() => 50 - (svgStrokeWidth.value / 2))
+const svgCircumference = computed(() => Math.PI * 2 * svgRadius.value)
 </script>
 
 <template>