@bagelink/vue 1.6.47 → 1.6.51

package/src/components/form/inputs/DateInput.vue

@@ -45,7 +45,7 @@ const isOpen = ref(false)
 // Date formatting composable
 function useFormatting() {
 	const formatDisplayDate = (date: Date | string | undefined): string => {
-		if (!date) {return ''}
+		if (!date) { return '' }
 		return formatDate(date, { fmt: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
 	}
 
@@ -58,7 +58,7 @@ function useFormatting() {
 
 		// Try DD/MM/YYYY format
 		const parts = input.split(/[/.-]/)
-		if (3 === parts.length) {
+		if (parts.length === 3) {
 			const [day, month, year] = parts.map(p => Number.parseInt(p, 10))
 			if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
 				const parsedDate = new Date(year, month - 1, day)
@@ -80,11 +80,10 @@ function useFormatting() {
 			// Keep the time when time is enabled
 			return date.toISOString()
 		}
-			// Normalize to midnight to emit exact date without time for server compatibility
-			const normalizedDate = new Date(date)
-			normalizedDate.setHours(0, 0, 0, 0)
-			return normalizedDate.toISOString().split('T')[0]
-		
+		// Normalize to midnight to emit exact date without time for server compatibility
+		const normalizedDate = new Date(date)
+		normalizedDate.setHours(0, 0, 0, 0)
+		return normalizedDate.toISOString().split('T')[0]
 	}
 
 	return {
@@ -123,9 +122,9 @@ function useInputHandling() {
 	}
 
 	const handleKeydown = (event: KeyboardEvent) => {
-		if ('Escape' === event.key) {
+		if (event.key === 'Escape') {
 			isOpen.value = false
-		} else if ('Enter' === event.key && inputValue.value) {
+		} else if (event.key === 'Enter' && inputValue.value) {
 			const date = parseUserInput(inputValue.value)
 			if (date) {
 				selectedDate.value = normalizeDate(date)

package/src/components/form/inputs/DatePicker.vue

@@ -28,8 +28,8 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
-const computedHighlightedDates = $computed(() => toValue(props.highlightedDates))
-const computedDisabledDates = $computed(() => toValue(props.disabledDates))
+const computedHighlightedDates = computed(() => toValue(props.highlightedDates))
+const computedDisabledDates = computed(() => toValue(props.disabledDates))
 
 // State
 const currentMonth = ref(new Date())
@@ -40,34 +40,34 @@ const time = new Time(props.firstDayOfWeek, props.locale)
 
 // Parse a date string or object into a Date object
 function parseDate(value: string | Date | undefined): Date | null {
-	if (!value) {return null}
-	const date = 'string' === typeof value ? new Date(value) : value
+	if (!value) { return null }
+	const date = typeof value === 'string' ? new Date(value) : value
 	return Number.isNaN(date.getTime()) ? null : date
 }
 
 // Date validation composable
 function useDateValidation() {
 	const isDateDisabled = (date: Date | null) => {
-		if (!date) {return true}
+		if (!date) { return true }
 		const minDate = parseDate(props.min)
 		const maxDate = parseDate(props.max)
 
 		// Check if date is in min/max range
-		if (minDate && date < minDate) {return true}
-		if (maxDate && date > maxDate) {return true}
+		if (minDate && date < minDate) { return true }
+		if (maxDate && date > maxDate) { return true }
 
 		// Check if date is in the disabled dates array
-		if (Array.isArray(computedDisabledDates) && 0 < computedDisabledDates.length) {
-			const isInDisabledDates = computedDisabledDates.some((disabledDate) => {
+		if (Array.isArray(computedDisabledDates.value) && computedDisabledDates.value.length > 0) {
+			const isInDisabledDates = computedDisabledDates.value.some((disabledDate) => {
 				const parsedDisabledDate = parseDate(disabledDate)
-				if (!parsedDisabledDate) {return false}
+				if (!parsedDisabledDate) { return false }
 
 				// Compare year, month, and day
 				return date.getFullYear() === parsedDisabledDate.getFullYear()
 					&& date.getMonth() === parsedDisabledDate.getMonth()
 					&& date.getDate() === parsedDisabledDate.getDate()
 			})
-			if (isInDisabledDates) {return true}
+			if (isInDisabledDates) { return true }
 		}
 
 		return false
@@ -77,8 +77,8 @@ function useDateValidation() {
 		const minDate = parseDate(props.min)
 		const maxDate = parseDate(props.max)
 
-		if (minDate && year < minDate.getFullYear()) {return true}
-		if (maxDate && year > maxDate.getFullYear()) {return true}
+		if (minDate && year < minDate.getFullYear()) { return true }
+		if (maxDate && year > maxDate.getFullYear()) { return true }
 		return false
 	}
 
@@ -114,7 +114,7 @@ function useCalendarView() {
 
 		// Always ensure we have 6 rows (42 days) in our calendar
 		// If we have less than 6 weeks, add extra week(s) from the next month
-		while (6 > weeksInMonth.length) {
+		while (weeksInMonth.length < 6) {
 			const lastWeek = weeksInMonth[weeksInMonth.length - 1]
 			const lastDay = lastWeek[lastWeek.length - 1]
 			const nextDay = new Date(lastDay.getFullYear(), lastDay.getMonth(), lastDay.getDate() + 1)
@@ -163,14 +163,14 @@ function useCalendarView() {
 	})
 
 	const isSelected = (date: Date | null) => {
-		if (!date || !selectedDate.value) {return false}
+		if (!date || !selectedDate.value) { return false }
 		return date.getFullYear() === selectedDate.value.getFullYear()
 			&& date.getMonth() === selectedDate.value.getMonth()
 			&& date.getDate() === selectedDate.value.getDate()
 	}
 
 	const isToday = (date: Date | null) => {
-		if (!date) {return false}
+		if (!date) { return false }
 		return time.dateIsToday(date)
 	}
 
@@ -184,13 +184,13 @@ function useCalendarView() {
 	 * @returns True if the date should be highlighted
 	 */
 	const isHighlighted = computed(() => (date?: Date): boolean => {
-		if (!date || !Array.isArray(computedHighlightedDates) || !computedHighlightedDates.length) {
+		if (!date || !Array.isArray(computedHighlightedDates.value) || !computedHighlightedDates.value.length) {
 			return false
 		}
 
-		return computedHighlightedDates.some((highlightedDate) => {
+		return computedHighlightedDates.value.some((highlightedDate) => {
 			const parsedDate = parseDate(highlightedDate)
-			if (!parsedDate) {return false}
+			if (!parsedDate) { return false }
 
 			// Compare year, month, and day
 			return date.getFullYear() === parsedDate.getFullYear()
@@ -233,12 +233,12 @@ function useNavigation() {
 	}
 
 	const previousYear = () => {
-		const offset = 'months' === currentView.value ? 1 : 21
+		const offset = currentView.value === 'months' ? 1 : 21
 		currentMonth.value = new Date(currentMonth.value.getFullYear() - offset, currentMonth.value.getMonth(), 1)
 	}
 
 	const nextYear = () => {
-		const offset = 'months' === currentView.value ? 1 : 21
+		const offset = currentView.value === 'months' ? 1 : 21
 		currentMonth.value = new Date(currentMonth.value.getFullYear() + offset, currentMonth.value.getMonth(), 1)
 	}
 
@@ -258,14 +258,14 @@ function useTimeHandling() {
 	const minutes = computed(() => selectedDate.value?.getMinutes() ?? 0)
 
 	const handleHourInput = (value: number) => {
-		if (!selectedDate.value) {return}
+		if (!selectedDate.value) { return }
 		const newDate = new Date(selectedDate.value)
 		newDate.setHours(value)
 		emitDateValue(newDate)
 	}
 
 	const handleMinuteInput = (value: number) => {
-		if (!selectedDate.value) {return}
+		if (!selectedDate.value) { return }
 		const newDate = new Date(selectedDate.value)
 		newDate.setMinutes(value)
 		emitDateValue(newDate)
@@ -308,7 +308,7 @@ const { hours, minutes, handleHourInput, handleMinuteInput } = useTimeHandling()
 
 // Date selection handler
 function selectDate(date: Date | null) {
-	if (!date) {return}
+	if (!date) { return }
 
 	if (props.enableTime) {
 		// Create date with current time values

package/src/components/form/inputs/EmailInput.vue

@@ -92,14 +92,14 @@ const FAKE_EMAIL_DOMAINS = [
 	'poplk.com'
 ]
 
-let inputVal = $ref<string>('')
+const inputVal = ref<string>('')
 const suggestedCorrection = ref<string | null>(null)
 const validationMessage = ref('')
 const isValidating = ref(false)
 const isValidEmail = ref(true)
 const validatedEmails = new Map<string, boolean>()
 
-const input = $ref<HTMLInputElement>()
+const input = ref<HTMLInputElement>()
 
 // Use custom validation function
 function validateEmail(value: string) {
@@ -129,17 +129,17 @@ function validateEmail(value: string) {
 	return undefined
 }
 
-const debouncedEmit = useDebounceFn(() => { emit('debounce', inputVal) }, 700)
+const debouncedEmit = useDebounceFn(() => { emit('debounce', inputVal.value) }, 700)
 
 // Validate input directly when value changes
 function validateInput() {
-	if (!input) { return }
+	if (!input.value) { return }
 
-	input.setCustomValidity('')
-	if (!inputVal) { return }
-	const validationResult = validateEmail(inputVal)
+	input.value.setCustomValidity('')
+	if (!inputVal.value) { return }
+	const validationResult = validateEmail(inputVal.value)
 	if (typeof validationResult === 'string') {
-		input.setCustomValidity(validationResult)
+		input.value.setCustomValidity(validationResult)
 	}
 }
 
@@ -173,9 +173,9 @@ async function validateEmailWithServer(email: string) {
 
 		if (!isValid) {
 			validationMessage.value = 'This email domain appears to be invalid'
-			input?.setCustomValidity(validationMessage.value)
+			input.value?.setCustomValidity(validationMessage.value)
 		} else {
-			input?.setCustomValidity('')
+			input.value?.setCustomValidity('')
 		}
 	} catch (error) {
 		console.error('Email validation error:', error)
@@ -228,9 +228,9 @@ function checkForTypos(email: string) {
 // Apply the suggested correction
 function applyCorrection() {
 	if (suggestedCorrection.value) {
-		inputVal = suggestedCorrection.value
+		inputVal.value = suggestedCorrection.value
 		suggestedCorrection.value = null
-		emit('update:modelValue', inputVal)
+		emit('update:modelValue', inputVal.value)
 		debouncedEmit()
 	}
 }
@@ -262,13 +262,13 @@ function calculateLevenshteinDistance(a: string, b: string): number {
 	return matrix[a.length][b.length]
 }
 
-const debouncedServerValidate = useDebounceFn(() => validateEmailWithServer(inputVal), 1000)
+const debouncedServerValidate = useDebounceFn(() => validateEmailWithServer(inputVal.value), 1000)
 
 function updateInputVal() {
 	if (props.disabled) { return }
 
 	// Remove typo checking while typing - only do this on focusout now
-	// checkForTypos(inputVal)
+	// checkForTypos(inputVal.value)
 
 	// Clear any previous suggestions
 	suggestedCorrection.value = null
@@ -280,17 +280,17 @@ function updateInputVal() {
 		debouncedServerValidate()
 	}
 
-	emit('update:modelValue', inputVal)
+	emit('update:modelValue', inputVal.value)
 	debouncedEmit()
 }
 
 function handleFocusout(e: FocusEvent) {
 	// Check for typos when the user leaves the field
-	checkForTypos(inputVal)
+	checkForTypos(inputVal.value)
 
 	// Immediately validate on blur
-	if (props.serverValidate && EMAIL_REGEX.test(inputVal)) {
-		validateEmailWithServer(inputVal)
+	if (props.serverValidate && EMAIL_REGEX.test(inputVal.value)) {
+		validateEmailWithServer(inputVal.value)
 	}
 
 	if (props.onFocusout) { props.onFocusout(e) }
@@ -299,8 +299,8 @@ function handleFocusout(e: FocusEvent) {
 watch(
 	() => props.modelValue,
 	(newVal) => {
-		if (newVal !== inputVal) {
-			inputVal = newVal || ''
+		if (newVal !== inputVal.value) {
+			inputVal.value = newVal || ''
 			nextTick(() => { validateInput() })
 		}
 	},
@@ -308,17 +308,17 @@ watch(
 )
 
 watch(
-	() => inputVal,
+	() => inputVal.value,
 	() => { validateInput() },
 	{ immediate: true }
 )
 
-const hasFocus = () => document.activeElement === input
-const focus = () => input?.focus()
+const hasFocus = () => document.activeElement === input.value
+const focus = () => input.value?.focus()
 defineExpose({ focus, hasFocus })
 
 onMounted(() => {
-	if (props.autofocus) { setTimeout(() => input?.focus(), 10) }
+	if (props.autofocus) { setTimeout(() => input.value?.focus(), 10) }
 	// Don't auto-restore defaultValue - let user control their own content
 })
 </script>

package/src/components/form/inputs/NumberInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
 import { Icon, Btn } from '@bagelink/vue'
-import { nextTick, onMounted, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 type NumberLayout = 'default' | 'vertical' | 'horizontal'
 
@@ -48,12 +48,12 @@ const {
 
 const emit = defineEmits(['update:modelValue'])
 
-let numberValue = $ref<number>()
+const numberValue = ref<number>()
 
 onMounted(() => {
 	const num = modelValue !== undefined ? Number.parseFloat(`${modelValue}`) : undefined
 	const defaultNum = defaultValue !== undefined ? Number.parseFloat(`${defaultValue}`) : undefined
-	numberValue = num ?? defaultNum
+	numberValue.value = num ?? defaultNum
 })
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
@@ -71,24 +71,24 @@ function subtract(...numbers: (number | undefined)[]) {
 	return Number.parseFloat(numArr.reduce((acc, curr) => acc - curr, firstNum).toFixed(precision))
 }
 
-const canAdd = $computed(() => max === undefined || add(numberValue, step) <= max)
-const canDecrement = $computed(() => min === undefined || subtract(numberValue, step) >= min)
+const canAdd = computed(() => max === undefined || add(numberValue.value, step) <= max)
+const canDecrement = computed(() => min === undefined || subtract(numberValue.value, step) >= min)
 
 // Methods
 function increment() {
-	if (!canAdd) {return}
-	numberValue = add(numberValue ?? 0, step)
-	emit('update:modelValue', numberValue)
+	if (!canAdd.value) { return }
+	numberValue.value = add(numberValue.value ?? 0, step)
+	emit('update:modelValue', numberValue.value)
 }
 
 function decrement() {
-	if (!canDecrement) {return}
-	numberValue = subtract(numberValue || 0, step)
-	emit('update:modelValue', numberValue)
+	if (!canDecrement.value) { return }
+	numberValue.value = subtract(numberValue.value || 0, step)
+	emit('update:modelValue', numberValue.value)
 }
 
 function formatNumber(num: number) {
-	if (Number.isNaN(num)) {return ''}
+	if (Number.isNaN(num)) { return '' }
 	const formatter = new Intl.NumberFormat('en-US', {
 		minimumFractionDigits: 0,
 		maximumFractionDigits: 20,
@@ -108,38 +108,38 @@ function formatNumber(num: number) {
 		: `${padding}${integerPart}`
 }
 
-let formattedValue = $ref('')
+const formattedValue = ref('')
 function inputHandler() {
-	const numeric = formattedValue.replace(/[^\d.-]/g, '')
+	const numeric = formattedValue.value.replace(/[^\d.-]/g, '')
 	const emptyValue = ['', '-', '.', '-.'].includes(numeric)
-	const isTypingDecimal = formattedValue.endsWith('.')
+	const isTypingDecimal = formattedValue.value.endsWith('.')
 	const isTypingTrailingZeros = /\.\d*0$/.test(numeric) // Check if ending with decimal followed by digits ending in 0
 
 	if (emptyValue || isTypingDecimal || isTypingTrailingZeros) {
-		emit('update:modelValue', '-' === numeric ? '-' : numeric)
+		emit('update:modelValue', numeric === '-' ? '-' : numeric)
 		return
 	}
 
-	numberValue = Number.parseFloat(numeric)
-	formattedValue = emptyValue ? '' : formatNumber(numberValue)
-	emit('update:modelValue', numberValue)
+	numberValue.value = Number.parseFloat(numeric)
+	formattedValue.value = emptyValue ? '' : formatNumber(numberValue.value)
+	emit('update:modelValue', numberValue.value)
 }
 
-watch(() => numberValue, () => {
+watch(() => numberValue.value, () => {
 	nextTick(() => {
 		// Don't reformat if user is currently typing a decimal or trailing zeros
-		if (formattedValue.endsWith('.') || /\.\d*0$/.test(formattedValue)) {return}
-		formattedValue = numberValue !== undefined ? formatNumber(numberValue) : ''
+		if (formattedValue.value.endsWith('.') || /\.\d*0$/.test(formattedValue.value)) { return }
+		formattedValue.value = numberValue.value !== undefined ? formatNumber(numberValue.value) : ''
 	})
 })
 
 watch(() => modelValue, (newVal) => {
-	if (newVal !== numberValue) {
-		if ('string' === typeof newVal && ('-' === newVal || newVal.endsWith('.'))) {
-			formattedValue = newVal
+	if (newVal !== numberValue.value) {
+		if (typeof newVal === 'string' && (newVal === '-' || newVal.endsWith('.'))) {
+			formattedValue.value = newVal
 			return
 		}
-		numberValue = Number.parseFloat(`${newVal}`) || 0
+		numberValue.value = Number.parseFloat(`${newVal}`) || 0
 	}
 }, { immediate: true })
 </script>

package/src/components/form/inputs/OTP.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 const props = defineProps<{ digitCount: number, default?: string, modelValue?: string }>()
 
 const emit = defineEmits(['update:modelValue', 'complete'])
 const digits = reactive<(number | string | undefined)[]>([])
-const otpCont = $ref<HTMLElement>()
+const otpCont = ref<HTMLElement>()
 
 function handlePaste(event: ClipboardEvent, index: number) {
 	event.preventDefault()
 	const { clipboardData } = event
 	const pastedText = clipboardData?.getData('text').replaceAll(/\D/g, '') // Ensure only numeric digits are pasted
 	const pastedDigits = [...(pastedText ?? '')]
-	if (!pastedDigits) {return}
+	if (!pastedDigits) { return }
 	for (let i = 0; i < pastedDigits.length; i++) {
 		const digit = pastedDigits[i]
 		if (index + i < digits.length) {
@@ -41,11 +41,11 @@ function handleKeyDown(event: KeyboardEvent, index: number) {
 		return
 	}
 
-	if ('Backspace' === event.key) {
+	if (event.key === 'Backspace') {
 		digits[index] = undefined
 
-		if (0 !== index) {
-			const prevDigit = otpCont?.children[index - 1] as any
+		if (index !== 0) {
+			const prevDigit = otpCont.value?.children[index - 1] as any
 			prevDigit.focus()
 		}
 		emitUpdate()
@@ -58,7 +58,7 @@ function handleKeyDown(event: KeyboardEvent, index: number) {
 
 		if (index !== props.digitCount - 1) {
 			setTimeout(() => {
-				const nextDigit = otpCont?.children[index + 1] as any
+				const nextDigit = otpCont.value?.children[index + 1] as any
 				nextDigit.focus()
 			}, 10)
 		}

package/src/components/form/inputs/PasswordInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
 import { Btn, TextInput } from '@bagelink/vue'
+import { computed } from 'vue'
 
 export interface TextInputProps {
 	id?: string
@@ -38,8 +39,8 @@ const props = withDefaults(
 const password = defineModel<string>('modelValue')
 const showPwd = defineModel<boolean>('showPwd', { default: false })
 
-const toggleShowPwdIcon = $computed(() => showPwd.value ? 'visibility_off' : 'visibility')
-const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
+const toggleShowPwdIcon = computed(() => showPwd.value ? 'visibility_off' : 'visibility')
+const inputType = computed(() => (showPwd.value ? 'text' : 'password'))
 </script>
 
 <template>

package/src/components/form/inputs/RadioGroup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="ContextObjType extends { [key: string]: any }">
 import { Btn } from '@bagelink/vue'
-import { watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 export interface RadioOption<T> {
 	imgAlt?: string
@@ -41,7 +41,7 @@ const props = withDefaults(
 
 const emit = defineEmits(['delete', 'focus', 'blur', 'change'])
 
-const name = $computed(
+const name = computed(
 	() => (
 		props.groupName
 		|| props.id
@@ -49,38 +49,38 @@ const name = $computed(
 	)
 )
 const selectedOption = defineModel('modelValue')
-let loadedOptions = $ref<any[]>([])
-const visibleOptions = $computed(() => Array.isArray(props.options) ? (props.options as any[]) : (loadedOptions as any[]))
+const loadedOptions = ref<any[]>([])
+const visibleOptions = computed(() => Array.isArray(props.options) ? (props.options as any[]) : (loadedOptions.value as any[]))
 
 async function loadOptionsIfNeeded() {
-	if ('function' === typeof props.options) {
+	if (typeof props.options === 'function') {
 		try {
-			loadedOptions = await props.options()
+			loadedOptions.value = await props.options()
 		} catch {
-			loadedOptions = []
+			loadedOptions.value = []
 		}
 	}
 }
 
 watch(() => props.options, () => {
-	loadedOptions = []
+	loadedOptions.value = []
 	loadOptionsIfNeeded()
 }, { immediate: true, deep: true })
-let isFocused = $ref(false)
+const isFocused = ref(false)
 
-const containerClasses = $computed(() => ({
+const containerClasses = computed(() => ({
 	'has-error': !!props.error,
 	'is-disabled': props.disabled,
-	'is-focused': isFocused
+	'is-focused': isFocused.value
 }))
 
 function handleFocus() {
-	isFocused = true
+	isFocused.value = true
 	emit('focus')
 }
 
 function handleBlur() {
-	isFocused = false
+	isFocused.value = false
 	emit('blur')
 }
 
@@ -96,27 +96,29 @@ function handleChange() {
 			class="border rounded flex active-list-item hover"
 			:for="opt.id || `${name}-${index}`"
 			:class="{ 'p-05 gap-025': thin, 'py-1 gap-075': !thin, 'ps-05': !hideRadio, 'bg-gray-light': !bgColor && !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive }"
-			:style="{ backgroundColor: bgColor, borderColor: borderColor }"
+			:style="{ backgroundColor: bgColor, borderColor }"
 		>
 			<input
 				:id="opt.id || `${name}-${index}`" v-model="selectedOption" :disabled class="radio-input-list"
-				type="radio" :name :value="opt.value" :required="required" @focus="handleFocus" @blur="handleBlur"
+				type="radio" :name :value="opt.value" :required="required" :class="{
+					'mt-025': align === 'start' || align === 'top',
+					'mb-025': align === 'end' || align === 'bottom',
+					'hideRadio': hideRadio,
+				}" @focus="handleFocus"
+				@blur="handleBlur"
 				@change="handleChange"
-				:class="{
-	'mt-025': align === 'start' || align === 'top',
-	'mb-025': align === 'end' || align === 'bottom',
-	'hideRadio': hideRadio
-				}"
 			>
-			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025"
+			<div
+				class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025"
 				:class="{ 'txt-center justify-content-center': textAlign === 'center', 'txt-end justify-content-end': textAlign === 'right', 'txt-start justify-content-start': textAlign === 'left' }"
-				:style="{ color: textColor }">
+				:style="{ color: textColor }"
+			>
 				<img
 					v-if="opt.imgSrc" class="bg-popup shadow-light py-025 radius-05 m_w40" height="40" :src="opt.imgSrc"
 					:alt="opt.imgAlt"
 				>
 				<div class="">
-					<div v-if="opt.label" class="m-0 m_txt-14 line-height-14" v-html="opt.label"></div>
+					<div v-if="opt.label" class="m-0 m_txt-14 line-height-14" v-html="opt.label" />
 					<p v-if="opt.subLabel" class="txt-gray txt-12 m-0 pt-025">{{ opt.subLabel }}</p>
 				</div>
 				<slot name="radioItem" v-bind="opt" />
@@ -132,8 +134,9 @@ function handleChange() {
 }
 .radio-input-list {
 	width: auto;
-	transform: scale(1.4);
-	margin-inline-end: 0.6rem;
+	transform: scale(1.2);
+		margin-inline-end: 0.5rem;
+		margin-top: 0;
 }
 
 .radio-input-list.hidden {