@bagelink/vue 1.9.81 → 1.9.83

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.9.81",
+  "version": "1.9.83",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Loading.vue

@@ -96,7 +96,6 @@ const svgCircumference = computed(() => Math.PI * 2 * svgRadius.value)
 .lds-bar {
   height: var(--thickness, 4px);
   width: 100%;
-  max-width: 130px;
   --c: no-repeat linear-gradient(currentColor 0 0);
   background: var(--c), var(--c), #ddd;
   background-size: 60% 100%;

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

@@ -1,8 +1,9 @@
 <script setup lang="ts" generic="ContextObjType extends { [key: string]: any }">
+import type { Option } from '@bagelink/vue'
 import { Btn } from '@bagelink/vue'
 import { computed, ref, watch } from 'vue'
 
-export interface RadioOption<T> {
+export interface RadioOption<T = any> {
 	imgAlt?: string
 	imgSrc?: string
 	subLabel?: string
@@ -12,7 +13,9 @@ export interface RadioOption<T> {
 	value: any
 }
 
-type RadioOptionsSource<T> = RadioOption<T>[] | (() => Promise<RadioOption<T>[]>)
+type NormalizedRadioOption<T> = Required<Pick<RadioOption<T>, 'value'>> & Omit<RadioOption<T>, 'value'>
+
+type RadioOptionsSource<T> = (Option | RadioOption<T>)[] | (() => Promise<(Option | RadioOption<T>)[]>)
 
 const props = withDefaults(
 	defineProps<{
@@ -41,6 +44,13 @@ const props = withDefaults(
 
 const emit = defineEmits(['delete', 'focus', 'blur', 'change'])
 
+function normalizeOption<T>(opt: Option | RadioOption<T>): NormalizedRadioOption<T> {
+	if (typeof opt === 'string') { return { label: opt, value: opt } }
+	if (typeof opt === 'number') { return { label: `${opt}`, value: opt } }
+	if (typeof opt === 'boolean') { return { label: `${opt}`, value: opt } }
+	return opt as NormalizedRadioOption<T>
+}
+
 const name = computed(
 	() => (
 		props.groupName
@@ -49,8 +59,11 @@ const name = computed(
 	)
 )
 const selectedOption = defineModel('modelValue')
-const loadedOptions = ref<any[]>([])
-const visibleOptions = computed(() => Array.isArray(props.options) ? (props.options as any[]) : (loadedOptions.value as any[]))
+const loadedOptions = ref<(Option | RadioOption<ContextObjType>)[]>([])
+const visibleOptions = computed<NormalizedRadioOption<ContextObjType>[]>(() => {
+	const raw = Array.isArray(props.options) ? props.options : loadedOptions.value
+	return raw.map(opt => normalizeOption<ContextObjType>(opt))
+})
 
 async function loadOptionsIfNeeded() {
 	if (typeof props.options === 'function') {
@@ -93,8 +106,7 @@ function handleChange() {
 	<div :class="containerClasses">
 		<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="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 }"
 		>
@@ -104,9 +116,7 @@ function handleChange() {
 					'mt-025': align === 'start' || align === 'top',
 					'mb-025': align === 'end' || align === 'bottom',
 					'hideRadio': hideRadio,
-				}" @focus="handleFocus"
-				@blur="handleBlur"
-				@change="handleChange"
+				}" @focus="handleFocus" @blur="handleBlur" @change="handleChange"
 			>
 			<div
 				class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025"
@@ -114,8 +124,8 @@ function handleChange() {
 				: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"
+					v-if="opt.imgSrc" class="py-025 radius-05 m_w40 object-fit" height="40" width="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" />
@@ -132,11 +142,12 @@ function handleChange() {
 .hideRadio.radio-input-list {
 	display: none !important;
 }
+
 .radio-input-list {
 	width: auto;
 	transform: scale(1.2);
-		margin-inline-end: 0.5rem;
-		margin-top: 0;
+	margin-inline-end: 0.5rem;
+	margin-top: 0;
 }
 
 .radio-input-list.hidden {