@bagelink/vue 1.12.31 → 1.12.36

package/src/components/calendar/views/AgendaView.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import type { SetupContext } from 'vue'
 import type { CalendarEvent } from '../CalendarTypes'
-import { formatDate } from '@bagelink/vue'
-import { ref, computed, onMounted, onUnmounted, useSlots } from 'vue'
+import { formatDate, getI18n, useI18n, Icon, Card } from '@bagelink/vue'
+import { ref, computed, watch, watchEffect, nextTick, onMounted, onUnmounted, useSlots } from 'vue'
 
 interface AgendaViewEvent extends CalendarEvent {
-	dayLabel: string
+	durationMin: number
+}
+
+interface DayGroup {
+	dateKey: string
+	date: Date
+	dayNumber: string
+	monthShort: string
+	weekdayLong: string
 	isToday: boolean
-	height: number
+	events: AgendaViewEvent[]
 }
 
 const props = defineProps<{
@@ -22,267 +30,236 @@ const emit = defineEmits<{
 }>()
 
 const slots: SetupContext['slots'] = useSlots()
+const { t } = useI18n()
 
-// UI references
 const containerRef = ref<HTMLElement | null>(null)
-const currentDate = ref<Date | null>(null)
 
-// Process events for agenda view
-const processedEvents = computed(() => {
-	const events: AgendaViewEvent[] = []
+function getLocale(): string {
+	try { return (getI18n().global.locale as { value: string }).value } catch { return 'en' }
+}
+
+function formatDuration(minutes: number): string {
+	if (minutes < 60) return `${minutes} min`
+	const h = Math.floor(minutes / 60)
+	const m = minutes % 60
+	return m ? `${h}h ${m}m` : `${h}h`
+}
+
+// Group events by day
+const dayGroups = computed((): DayGroup[] => {
+	const locale = getLocale()
 	const today = new Date().toDateString()
 
-	// Sort events by start time
-	const sortedEvents = [...props.events].sort(
+	const sorted = [...props.events].sort(
 		(a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime()
 	)
 
-	// Group events by date
-	const eventsByDate = sortedEvents.reduce((acc, event) => {
-		const date = new Date(event.start_time).toDateString()
-		if (!acc[date]) { acc[date] = [] }
-		acc[date].push(event)
-		return acc
-	}, {} as { [key: string]: CalendarEvent[] })
-
-	// Process each date's events
-	Object.entries(eventsByDate).forEach(([dateStr, dateEvents]) => {
-		const date = new Date(dateStr)
-		const isToday = date.toDateString() === today
-
-		dateEvents.forEach((event) => {
-			const duration = (new Date(event.end_time).getTime() - new Date(event.start_time).getTime()) / (1000 * 60)
-			// Limit height: 60px per 30 minutes, max 200px
-			const height = Math.min(duration / 30 * 60, 200)
-
-			events.push({
-				...event,
-				dayLabel: date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }),
-				isToday,
-				height
+	const map = new Map<string, DayGroup>()
+
+	for (const event of sorted) {
+		const date = new Date(event.start_time)
+		const dateKey = date.toDateString()
+
+		if (!map.has(dateKey)) {
+			map.set(dateKey, {
+				dateKey,
+				date,
+				dayNumber: date.toLocaleDateString(locale, { day: '2-digit' }),
+				monthShort: date.toLocaleDateString(locale, { month: 'short' }),
+				weekdayLong: date.toLocaleDateString(locale, { weekday: 'long' }),
+				isToday: dateKey === today,
+				events: [],
 			})
-		})
-	})
+		}
+
+		const durationMin = Math.round(
+			(new Date(event.end_time).getTime() - new Date(event.start_time).getTime()) / 60000
+		)
+		map.get(dateKey)!.events.push({ ...event, durationMin })
+	}
 
-	return events
+	return Array.from(map.values())
 })
 
-// Handle scroll to determine visible date
+const scrolledOnce = ref(false)
+
+// Scroll tracking (informs parent of visible date for header display only)
 function handleScroll() {
 	if (!containerRef.value) { return }
-
 	const container = containerRef.value
-	const eventElements = container.querySelectorAll('.event')
-	let mostVisibleEvent: Element | null = null
-	let maxVisibility = 0
-
-	// Find the event that's most visible in the viewport
-	eventElements.forEach((element) => {
-		const rect = element.getBoundingClientRect()
-		const containerRect = container.getBoundingClientRect()
-
-		// Calculate how much of the element is visible
-		const visibleTop = Math.max(rect.top, containerRect.top)
-		const visibleBottom = Math.min(rect.bottom, containerRect.bottom)
-		const visibleHeight = Math.max(0, visibleBottom - visibleTop)
-		const visibility = visibleHeight / rect.height
-
-		if (visibility > maxVisibility) {
-			maxVisibility = visibility
-			mostVisibleEvent = element
-		}
+	const dayEls = container.querySelectorAll<HTMLElement>('.agenda-day-group')
+	const containerTop = container.getBoundingClientRect().top
+
+	let closest: HTMLElement | null = null
+	let minDist = Infinity
+
+	dayEls.forEach((el) => {
+		const dist = Math.abs(el.getBoundingClientRect().top - containerTop)
+		if (dist < minDist) { minDist = dist; closest = el }
 	})
 
-	// Update current date if a new date is most visible
-	if (mostVisibleEvent) {
-		const element = mostVisibleEvent as HTMLElement
-		const dateStr = element.dataset.date || element.getAttribute('data-date')
-		if (dateStr) {
-			const date = new Date(dateStr)
-			if (!currentDate.value || date.toDateString() !== currentDate.value.toDateString()) {
-				currentDate.value = date
-				emit('dateChange', date)
-			}
-		}
+	if (closest) {
+		const dateStr = (closest as HTMLElement).dataset.date
+		if (dateStr) { emit('dateChange', new Date(dateStr)) }
 	}
 }
 
-// Update event handling to emit the openPopover event
 function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 	if (!slots.eventContent) {
 		emit('eventClick', event)
 		return
 	}
-
-	// Calculate position from DOM event if available
 	if (domEvent) {
 		const rect = (domEvent.currentTarget as HTMLElement).getBoundingClientRect()
-		const position = {
-			top: rect.top + window.scrollY + (rect.height / 2),
-			left: rect.left + window.scrollX + rect.width + 10
-		}
-		emit('openPopover', event, position)
+		emit('openPopover', event, {
+			top: rect.top + window.scrollY + rect.height / 2,
+			left: rect.left + window.scrollX + rect.width + 10,
+		})
 	} else {
 		emit('openPopover', event)
 	}
 }
 
-// Lifecycle hooks
-onMounted(() => {
-	if (containerRef.value) {
-		containerRef.value.addEventListener('scroll', handleScroll)
+function toMidnight(date: Date): number {
+	const d = new Date(date)
+	d.setHours(0, 0, 0, 0)
+	return d.getTime()
+}
+
+function scrollToDate(targetDate: Date, behavior: 'smooth' | 'instant' | 'auto' = 'instant', direction: 'forward' | 'backward' | 'nearest' = 'nearest') {
+	if (!containerRef.value) { return }
+	const dayEls = Array.from(containerRef.value.querySelectorAll<HTMLElement>('.agenda-day-group'))
+	if (!dayEls.length) { return }
+	// Normalize to midnight to avoid timestamp-within-day comparison issues
+	const targetDay = toMidnight(targetDate)
+	let closest: HTMLElement | null = null
+	let minDiff = Infinity
+
+	if (direction === 'forward') {
+		// First day on or after target date (midnight-normalized)
+		for (const el of dayEls) {
+			const dateStr = el.dataset.date
+			if (!dateStr) { continue }
+			const t = toMidnight(new Date(dateStr))
+			if (t >= targetDay && t - targetDay < minDiff) { minDiff = t - targetDay; closest = el }
+		}
+	} else if (direction === 'backward') {
+		// Last day on or before target date (midnight-normalized)
+		for (const el of dayEls) {
+			const dateStr = el.dataset.date
+			if (!dateStr) { continue }
+			const t = toMidnight(new Date(dateStr))
+			if (t <= targetDay && targetDay - t < minDiff) { minDiff = targetDay - t; closest = el }
+		}
+	}
+
+	// Fallback to nearest (also used for 'nearest' direction)
+	if (!closest) {
+		for (const el of dayEls) {
+			const dateStr = el.dataset.date
+			if (!dateStr) { continue }
+			const diff = Math.abs(toMidnight(new Date(dateStr)) - targetDay)
+			if (diff < minDiff) { minDiff = diff; closest = el }
+		}
 	}
+
+	closest?.scrollIntoView({ block: 'start', behavior })
+}
+
+// Navigate to date when buttons are clicked (parent changes startDate)
+watch(() => props.startDate, (newDate, oldDate) => {
+	const direction = !oldDate || toMidnight(newDate) >= toMidnight(oldDate) ? 'forward' : 'backward'
+	nextTick(() => scrollToDate(newDate, 'smooth', direction))
 })
 
-onUnmounted(() => {
-	if (containerRef.value) {
-		containerRef.value.removeEventListener('scroll', handleScroll)
-	}
+// Initial scroll to today — wait until data covers today before scrolling,
+// to avoid scrolling to a wrong date during partial/incremental data load.
+watchEffect(() => {
+	if (scrolledOnce.value || !dayGroups.value.length) { return }
+	const todayTime = new Date().getTime()
+	const hasTodayOrLater = dayGroups.value.some(g => g.date.getTime() >= todayTime - 86400000)
+	if (!hasTodayOrLater) { return }
+	scrolledOnce.value = true
+	nextTick(() => scrollToDate(new Date(), 'instant', 'nearest'))
 })
+
+onMounted(() => { containerRef.value?.addEventListener('scroll', handleScroll) })
+onUnmounted(() => { containerRef.value?.removeEventListener('scroll', handleScroll) })
 </script>
 
 <template>
-	<div class="agenda-view">
-		<div class="agenda-header">
-			<div class="time-column">
-				Time
+<div ref="containerRef" class="display-flex column h-100p overflow gap-0">
+	<template v-if="dayGroups.length === 0">
+		<div class="flex h-100p justify-content-center column gap-1 opacity-3">
+			<Icon icon="calendar" size="4" weight="200" />
+			{{ t('calendar.agenda.noEvents') }}
+		</div>
+	</template>
+
+	<section v-for="group in dayGroups" :key="group.dateKey" class="mb-1 agenda-day-group" :data-date="group.date.toISOString()" :data-today="group.isToday || undefined">
+		<div class="sticky z-2 flex gap-05 p-1 m_p-05 mb-05" :class="{ 'bg-primary-light': group.isToday, 'bg-bg': !group.isToday }">
+			<div class="bg-white border line-height-12 radius-1 grid align-items-center  px-05 py-025 txt-center">
+				<p class="txt18">{{ group.dayNumber }}</p>
+				<p class="txt12">{{ group.monthShort }}</p>
 			</div>
-			<div class="event-column">
-				Event
+			<div>
+				<p class=" line-height-12">{{ group.weekdayLong }}</p>
+				<p class="txt12 opacity-6">
+					{{ t('calendar.agenda.eventsCount', group.events.length, { named: { n: group.events.length } }) }}
+				</p>
 			</div>
+			<p v-if="group.isToday" class="ms-auto">{{ t('calendar.today') }}</p>
 		</div>
-		<div ref="containerRef" class="agenda-content">
-			<div
-				v-for="event in processedEvents"
-				:key="event.id"
-				class="event"
-				:style="{
-					// height: `${event.height}px`,
-					backgroundColor: event.color || 'var(--bgl-primary)',
-				}"
-				:data-date="event.start_time"
-				@click.stop="handleEventSelection(event, $event)"
-			>
-				<div class="event-content">
-					<div class="event-time">
-						{{ formatDate(event.start_time, { format: 'HH:mm' }) }}
-					</div>
-					<div class="event-details">
-						<div class="event-title">
-							{{ event.title }}
-						</div>
-						<div class="event-day" :class="{ today: event.isToday }">
-							{{ event.dayLabel }}
-						</div>
-					</div>
-				</div>
+
+		<!-- Event rows -->
+		<article v-for="event in group.events" :key="event.id" class="agenda-event-row grid gap-05 hover pe-1" @click.stop="handleEventSelection(event, $event)">
+			<div class="agenda-event-time txt-center pt-1 txt14 opacity-6 bold relative">
+				{{ formatDate(event.start_time, { format: 'HH:mm' }) }}
 			</div>
-		</div>
-	</div>
+			<Card class="agenda-event-card overflow-hidden transition py-025 px-075 my-025" frame :style="{ '--event-color': event.color || 'var(--bgl-primary)' }">
+				<div class="flex space-between">
+					<h3 class="txt16 m-0 semi">{{ event.title }}</h3>
+					<p class="txt12 opacity-6">{{ formatDuration(event.durationMin) }}</p>
+				</div>
+				<p v-if="event.description" class="txt12 opacity-6">{{ event.description }}</p>
+			</Card>
+		</article>
+	</section>
+</div>
 </template>
 
 <style scoped>
-.agenda-view {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.agenda-header {
-  display: flex;
-  padding: 0.5rem;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.time-column {
-  width: 100px;
-  flex-shrink: 0;
-}
-
-.event-column {
-  flex-grow: 1;
-}
-
-.agenda-content {
-  flex-grow: 1;
-  overflow-y: auto;
-padding: 1rem 0;
+.agenda-event-row {
+	grid-template-columns: 72px 1fr;
+	align-items: stretch;
 }
 
-.event {
-margin-bottom: 0.5rem;
-  border-radius: 4px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: all 0.2s ease;
+.agenda-event-time::after {
+	content: '';
+	display: block;
+	width: 1px;
+	height: calc(100% - 2rem);
+	background: var(--border-color, #e6e8ec);
+	margin: 0.5rem auto 0;
 }
 
-.event:hover {
-/* transform: scale(1.01); */
-	filter: brightness(90%);
+/* .agenda-event-card {
+	border-inline-start: var(--event-color, var(--bgl-primary)) solid calc(var(--card-border-radius) + 0.25rem); 
+} */
+
+.agenda-event-card h3::before {
+	content: '';
+	width: 10px;
+	height: 10px;
+	display: inline-block;
+	border-radius: 100%;
+	margin-inline-end: 0.35rem;
+	background: var(--event-color, var(--bgl-primary, #2563eb));
 }
 
-.event-content {
-  display: flex;
-  height: 100%;
-  color: white;
+@media (max-width: 910px) {
+.agenda-event-row {
+	grid-template-columns: 50px 1fr;
 }
-
-.event-time {
-  width: 100px;
-  flex-shrink: 0;
-  padding: 0.5rem;
-  display: flex;
-  align-items: center;
-  font-size: 0.9rem;
-}
-
-.event-details {
-  flex-grow: 1;
-  padding: 0.5rem;
-  border-left: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.event-title {
-  font-size: 1rem;
-  margin-bottom: 0.25rem;
-}
-
-.event-day {
-  font-size: 0.8rem;
-  opacity: 0.8;
-}
-
-.event-day.today {
-  color: var(--bgl-primary);
-  opacity: 1;
-}
-
-@media (max-width: 768px) {
-  .agenda-header {
-    padding: 0.5rem;
-  }
-
-  .time-column {
-    width: 80px;
-  }
-
-  .event-content {
-    font-size: 0.9rem;
-  }
-
-  .event-time {
-    width: 80px;
-    font-size: 0.8rem;
-  }
-
-  .event-title {
-    font-size: 0.9rem;
-  }
-
-  .event-day {
-    font-size: 0.7rem;
-  }
 }
 </style>

package/src/components/calendar/views/MonthView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SetupContext } from 'vue'
 import type { CalendarEvent } from '../CalendarTypes'
-import { formatDate } from '@bagelink/vue'
+import { formatDate, getI18n } from '@bagelink/vue'
 import { computed, useSlots } from 'vue'
 
 interface MonthViewEvent {
@@ -27,7 +27,14 @@ const slots: SetupContext['slots'] = useSlots()
 const isMobile = computed(() => window.innerWidth < 768)
 
 // Calendar data
-const weekDays = computed(() => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
+const weekDays = computed(() => {
+	let locale = 'en'
+	try { locale = (getI18n().global.locale as { value: string }).value } catch { /* fallback */ }
+	// Jan 7-13 2024 = Sun–Sat
+	return Array.from({ length: 7 }, (_, i) =>
+		new Date(2024, 0, 7 + i).toLocaleDateString(locale, { weekday: 'short' })
+	)
+})
 
 // Calculate days for the current month view
 const currentMonth = computed(() => {

package/src/components/calendar/views/WeekView.vue

@@ -45,7 +45,7 @@ const timeRange = { start: 0, end: 24 }
 
 // Check if drag-to-create is enabled based on whether eventCreate handler is provided
 const isDragToCreateEnabled = computed(() => {
-	return !!slots.eventCreate || emit.hasOwnProperty('eventCreate')
+	return !!slots.eventCreate || Object.prototype.hasOwnProperty.call(emit, 'eventCreate')
 })
 
 // Drag state
@@ -603,11 +603,6 @@ function scrollToTime(time: number) {
 
 // Lifecycle hooks
 onMounted(() => {
-	console.log('[WeekView] mounted with props:', {
-		availabilityMode: props.availabilityMode,
-		availabilityEditable: props.availabilityEditable,
-		availabilitySlotsCount: props.availabilitySlots?.length
-	})
 	updateCurrentTimeIndicator()
 	currentTimeInterval.value = setInterval(updateCurrentTimeIndicator, 60000)
 
@@ -669,6 +664,13 @@ onUnmounted(() => {
 					class="day-column top bottom border-start relative"
 					@mousedown="props.availabilityEditable ? handleAvailMouseDown($event, index) : handleMouseDown($event, day)"
 				>
+					<!-- Hour grid lines -->
+					<div
+						v-for="slot in timeSlots" :key="`line-${slot.time}`"
+						class="hour-line absolute start end pointer-events-none"
+						:style="{ top: `${slot.hour * slotHeight}px` }"
+					/>
+
 					<!-- Availability painted blocks (behind events) -->
 					<template v-if="props.availabilityMode">
 						<div
@@ -794,6 +796,12 @@ onUnmounted(() => {
 	/* Adjust dot position */
 }
 
+.hour-line {
+	border-top: 1px solid var(--bgl-gray-80);
+	z-index: 0;
+	height: 0;
+}
+
 /* This ensures all grid content aligns properly */
 .overflow {
 	position: relative;

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

@@ -4,7 +4,7 @@ import type { Ref, WritableComputedRef } from 'vue'
 import type { DraggableEvent } from '../../draggable/useDraggable'
 
 import { Btn, resolveI18n, useI18n } from '@bagelink/vue'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, useSlots } from 'vue'
 import Draggable from '../../draggable/Draggable.vue'
 
 const props = defineProps<{
@@ -18,6 +18,7 @@ const props = defineProps<{
 	deleteTooltip?: string
 	itemLabel?: string
 	collapsible?: boolean
+	simple?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -25,6 +26,7 @@ defineSlots<{
 	default: (props: { item: WritableComputedRef<T>, index: number }) => unknown
 }>()
 
+const slots = useSlots()
 const { $t } = useI18n()
 
 const items = ref(Array.isArray(props.modelValue) ? [...props.modelValue] : []) as Ref<T[]>
@@ -116,6 +118,14 @@ function onUpdate(value: T, i: number) {
 	updateModel()
 }
 
+const isSimple = computed(() => {
+	if (props.simple) return true
+	if (!slots.default) return false
+	const dummyItem = computed({ get: () => undefined as T, set: () => { } })
+	const vnodes = slots.default({ item: dummyItem, index: 0 })
+	return vnodes.filter(vn => typeof vn.type !== 'symbol').length === 1
+})
+
 // Create a writable computed ref for each item
 function getItemRef(i: number) {
 	return computed({
@@ -136,9 +146,9 @@ function getItemRef(i: number) {
 			{{ helpText }}
 		</p>
 		<template v-if="!collapsible">
-			<div v-for="(_, i) in items" :key="i" class="array-input-row grid align-items-center pb-1">
+			<div v-for="(_, i) in items" :key="i" class="array-input-row grid align-items-center" :class="{ 'simpleArray': isSimple, 'pb-1': !isSimple }">
 				<slot :item="getItemRef(i)" :index="i" />
-				<div v-if="allowDelete" class="ms-075 my-1 border-start h-100p ps-025">
+				<div v-if="allowDelete" class=" h-100p" :class="{ 'border-start ps-025 ms-075': !simple }">
 					<Btn
 						v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete"
 						@click="deleteItem(i)"
@@ -227,4 +237,7 @@ function getItemRef(i: number) {
 	.grid-array-line button:active {
 		filter: brightness(80%);
 }
+.simpleArray .label-text {
+	display: none;
+}
 </style>

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

@@ -103,38 +103,29 @@ function handleChange() {
 		<p v-if="label" class="group-label">
 			{{ resolveI18n(label) }} <span v-if="required">*</span>
 		</p>
-		<label
-			v-for="(opt, index) in visibleOptions" :key="opt.id || `${name}-${index}`"
-			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 }"
-		>
-			<input
-				:id="opt.id || `${name}-${index}`" v-model="selectedOption" :disabled class="radio-input-list"
-				type="radio" :name :value="opt.value" :required="required" :class="{
+<div class="radio-group-wrap">
+	<label v-for="(opt, index) in visibleOptions" :key="opt.id || `${name}-${index}`" class="border rounded flex active-list-item hover mb-05" :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 }">
+				<input :id="opt.id || `${name}-${index}`" v-model="selectedOption" :disabled class="radio-input-list" 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"
-			>
-			<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 }"
-			>
-				<img
-					v-if="opt.imgSrc" class="py-025 radius-05 m_w40 object-fit" height="40" width="40"
-					:src="opt.imgSrc" :alt="opt.imgAlt"
-				>
-				<Icon v-else-if="opt.icon" :icon="opt.icon" :size="1" />
-				<div class="">
-					<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>
+}" @focus="handleFocus" @blur="handleBlur" @change="handleChange">
+				<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 }">
+					<img v-if="opt.imgSrc" class="py-025 radius-05 m_w40 object-fit" height="40" width="40" :src="opt.imgSrc" :alt="opt.imgAlt">
+					<Icon v-else-if="opt.icon" :icon="opt.icon" :size="1" />
+					<div class="">
+						<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" />
 				</div>
-				<slot name="radioItem" v-bind="opt" />
-			</div>
-			<Btn v-if="deletable" class="ms-auto" flat thin icon="delete" @click="$emit('delete', opt)" />
-		</label>
+				<Btn v-if="deletable" class="ms-auto" flat thin icon="delete" @click="$emit('delete', opt)" />
+			</label>
+</div>
 	</div>
 </template>