@bagelink/vue 1.9.81 → 1.9.86

package/src/components/Btn.vue

@@ -59,6 +59,18 @@ const emit = defineEmits<{
 
 const { $t } = useI18n()
 
+const computedPairClass = computed(() => {
+	const theme = props.color || props.theme
+	if (!theme) {
+		// Only flat/border buttons get a default for visibility
+		if (props.flat || props.border || props.outline) {
+			return 'pair-black'
+		}
+		return undefined
+	}
+	return `pair-${theme}`
+})
+
 const isMobileScreen = ref(false)
 
 function checkMobile() {
@@ -140,7 +152,7 @@ const slots: SetupContext['slots'] = useSlots()
 
 <template>
 	<component
-		:is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
+		:is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="[{
 			'bgl_btn-icon': icon && !slots.default && !value,
 			thin,
 			'bgl_btn_xsSize': size === 'xs' || size === 'extra-small',
@@ -155,11 +167,9 @@ const slots: SetupContext['slots'] = useSlots()
 			'bgl_btn_alignStartMobile': alignTxtMobile === 'start',
 			'bgl_btn_alignEndMobile': alignTxtMobile === 'end',
 			round,
-			'bgl_btn_flat': flat,
-			'bgl_btn-border': border || outline,
-			[`bgl_btn-${color}`]: color,
-			[`bgl_btn-${theme}`]: theme,
-		}" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
+			'bgl_flatPill': flat,
+			'bgl_pill-border': border || outline,
+		}, computedPairClass]" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
 	>
 		<Loading v-if="loading" class="h-100p" size="15" />
 		<div v-else class="bgl_btn-flex">
@@ -180,15 +190,14 @@ const slots: SetupContext['slots'] = useSlots()
 </template>
 
 <style scoped>
-@import '../styles/btnColors.css';
+/* @import '../styles/base-colors.css'; */
 
 .bgl_btn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
-	background: var(--btn-bg);
-	color: var(--btn-color);
 	text-decoration: none;
+	/* Colors now handled by pair-* classes */
 }
 
 .bgl_btn.bgl_btn-icon {
@@ -227,20 +236,7 @@ a {
 	filter: var(--bgl-active-filter);
 }
 
-.bgl_btn.bgl_btn_flat {
-	background: transparent;
-	color: var(--btn-flat-color);
-}
-
-.bgl_btn_flat:hover:not(:disabled),
-.bgl_btn-icon.bgl_btn_flat:hover:not(:disabled) {
-	background: var(--bgl-gray-tint);
-}
-
-.bgl_btn.bgl_btn_flat:active:not(:disabled),
-.bgl_btn-icon.bgl_btn_flat:active:not(:disabled) {
-	background: var(--bgl-gray-tint-dark);
-}
+/* Flat hover/active styles now handled by base-colors.css */
 
 .bgl_btn.round {
 	border-radius: 1000px !important;
@@ -254,20 +250,7 @@ a {
 	transform: rotateY(0deg);
 }
 
-.bgl_btn-border,
-.bgl_btn-icon.bgl_btn_flat.bgl_btn-border {
-	border: 1px solid var(--btn-flat-color);
-	background: transparent;
-	color: var(--btn-flat-color);
-}
-
-.bgl_btn-border:hover {
-	color: var(--btn-flat-color);
-}
-
-.bgl_btn-border:active:not(:disabled) {
-	filter: brightness(80%);
-}
+/* Border active styles now handled by base-colors.css */
 
 .bgl_btn:disabled,
 .bgl_btn[disabled=true] {
@@ -399,4 +382,21 @@ a {
 		justify-content: flex-end;
 	}
 }
+
+/* Ensure external color classes always override pair classes */
+.bgl_btn.color-white {
+	color: white !important;
+}
+
+.bgl_btn.color-black {
+	color: black !important;
+}
+
+.bgl_btn.text-white {
+	color: white !important;
+}
+
+.bgl_btn.text-black {
+	color: black !important;
+}
 </style>

package/src/components/Dropdown.vue

@@ -191,7 +191,7 @@ const computedPopperHideTriggers = computed((): TriggerEvent[] => {
 
 const computedAutoHide = computed(() => autoHide)
 
-const container = computed(() => triggerRef.value?.closest('dialog[open]') ?? 'body')
+const container = computed(() => 'body')
 
 const computedDelay = computed((): number | { show: number, hide: number } | undefined => {
 	if (delay !== undefined) { return delay }

package/src/components/Loading.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ThemeType } from '@bagelink/vue'
 import type { SizeUnit, SizeType } from '../types/BtnOptions'
 import { computed } from 'vue'
 import { standardSize } from '../utils/sizeParsing'
@@ -10,7 +11,7 @@ const { type: theme = 'ring', size = 50, thickness, duration = 1.2, color, progr
 	thickness?: SizeUnit
 	duration?: number | string
 	type?: LoadingType
-	color?: string
+	color?: ThemeType | string
 	progress?: number
 }>()
 
@@ -22,6 +23,14 @@ const computedBorder = computed(() => {
 	return standardSize(borderValue)
 })
 
+const computedColor = computed(() => {
+	if (!color) return 'var(--bgl-black)'
+	if (color.startsWith('#') || color.startsWith('rgb') || color.startsWith('var(')) {
+		return color // Custom color string
+	}
+	return `var(--bgl-${color})` // Convert theme color to CSS variable
+})
+
 // SVG progress calculations
 const svgStrokeWidth = computed(() => {
 	const borderNumeric = Number.parseFloat(computedBorder.value)
@@ -40,14 +49,14 @@ const svgCircumference = computed(() => Math.PI * 2 * svgRadius.value)
 		<!-- Bar Theme -->
 		<template v-if="theme === 'bar'">
 			<slot />
-			<div class="lds-bar" :style="{ animationDuration, color }" />
+			<div class="lds-bar" :style="{ animationDuration, color: computedColor }" />
 		</template>
 
 		<!-- Ellipsis Theme -->
 		<template v-if="theme === 'ellipsis'">
 			<slot />
 			<div class="lds-ellipsis" :style="{ '--size': computedSize }">
-				<div v-for="n in 4" :key="n" :style="{ color, '--size': computedSize }" />
+				<div v-for="n in 4" :key="n" :style="{ 'color': computedColor, '--size': computedSize }" />
 			</div>
 		</template>
 
@@ -56,11 +65,11 @@ const svgCircumference = computed(() => Math.PI * 2 * svgRadius.value)
 			<template v-if="progress !== undefined">
 				<svg :width="computedSize" :height="computedSize" viewBox="0 0 100 100">
 					<circle
-						cx="50" cy="50" :r="svgRadius" fill="none" :stroke="color || 'currentColor'"
+						cx="50" cy="50" :r="svgRadius" fill="none" :stroke="computedColor"
 						:stroke-width="svgStrokeWidth" stroke-opacity="0.2"
 					/>
 					<circle
-						cx="50" cy="50" :r="svgRadius" fill="none" :stroke="color || 'currentColor'"
+						cx="50" cy="50" :r="svgRadius" fill="none" :stroke="computedColor"
 						:stroke-width="svgStrokeWidth" stroke-linecap="round"
 						:stroke-dasharray="`${(progress / 100) * svgCircumference} ${svgCircumference}`"
 						transform="rotate(-90 50 50)"
@@ -69,7 +78,7 @@ const svgCircumference = computed(() => Math.PI * 2 * svgRadius.value)
 			</template>
 			<div
 				v-for="n in 4" v-else :key="n" class="ring-segment" :style="{
-					color,
+					'color': computedColor,
 					'width': computedSize,
 					'height': computedSize,
 					'borderWidth': computedBorder,
@@ -96,7 +105,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 {