@bagelink/vue 1.12.67 → 1.12.74

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

@@ -2,10 +2,12 @@
 import type { IconType } from '@bagelink/vue'
 import { Icon, Btn, resolveI18n } from '@bagelink/vue'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
 type NumberLayout = 'default' | 'vertical' | 'horizontal'
 
-interface NumberInputProps {
+interface NumberInputProps extends BagelInputShellProps {
 	modelValue?: number | string
 	min?: number
 	max?: number
@@ -46,9 +48,19 @@ const {
 	padZero = 1,
 	defaultValue,
 	useGrouping = true,
-	error
+	error,
+	frame,
+	outline,
+	minWidth,
+	maxWidth,
+	labelColor,
+	labelActiveColor,
 } = defineProps<NumberInputProps>()
 
+const { shellClass, shellStyle } = useBagelInputShell({
+	frame, outline, minWidth, maxWidth, labelColor, labelActiveColor,
+})
+
 const emit = defineEmits(['update:modelValue'])
 
 const numberValue = ref<number>()
@@ -61,78 +73,74 @@ onMounted(() => {
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 
+const TRAILING_ZEROS_RE = /\.\d*0$/
+
+function getPrecision() {
+	return step.toString().split('.')[1]?.length || 0
+}
+
 function add(...numbers: (number | undefined)[]) {
 	const numArr: number[] = numbers.map(n => n || 0)
-	const precision = step.toString().split('.')[1]?.length || 0
-	return Number.parseFloat(numArr.reduce((acc, curr) => acc + curr, 0).toFixed(precision))
+	return Number.parseFloat(numArr.reduce((acc, curr) => acc + curr, 0).toFixed(getPrecision()))
 }
 
 function subtract(...numbers: (number | undefined)[]) {
 	const numArr: number[] = numbers.map(n => n || 0)
 	const firstNum = numArr.shift() || 0
-	const precision = step.toString().split('.')[1]?.length || 0
-	return Number.parseFloat(numArr.reduce((acc, curr) => acc - curr, firstNum).toFixed(precision))
+	return Number.parseFloat(numArr.reduce((acc, curr) => acc - curr, firstNum).toFixed(getPrecision()))
 }
 
-const canAdd = computed(() => max === undefined || add(numberValue.value, step) <= max)
+const canIncrement = computed(() => max === undefined || add(numberValue.value, step) <= max)
 const canDecrement = computed(() => min === undefined || subtract(numberValue.value, step) >= min)
 
-// Methods
 function increment() {
-	if (!canAdd.value) { return }
+	if (!canIncrement.value) { return }
 	numberValue.value = add(numberValue.value ?? 0, step)
 	emit('update:modelValue', numberValue.value)
 }
 
 function decrement() {
 	if (!canDecrement.value) { return }
-	numberValue.value = subtract(numberValue.value || 0, step)
+	numberValue.value = subtract(numberValue.value ?? 0, step)
 	emit('update:modelValue', numberValue.value)
 }
 
+const numberFormatter = computed(() => new Intl.NumberFormat('en-US', {
+	minimumFractionDigits: 0,
+	maximumFractionDigits: 20,
+	useGrouping,
+}))
+
 function formatNumber(num: number) {
 	if (Number.isNaN(num)) { return '' }
-	const formatter = new Intl.NumberFormat('en-US', {
-		minimumFractionDigits: 0,
-		maximumFractionDigits: 20,
-		useGrouping
-	})
 
-	const formattedNum = formatter.format(num)
+	const formattedNum = numberFormatter.value.format(num)
 	const [integerPart, decimalPart] = formattedNum.split('.')
 
-	// Add padding zeros if needed
-	const padding = padZero && padZero > integerPart.replace(/,/g, '').length
-		? '0'.repeat(padZero - integerPart.replace(/,/g, '').length)
-		: ''
+	const rawLength = integerPart.replace(/,/g, '').length
+	const padding = padZero && padZero > rawLength ? '0'.repeat(padZero - rawLength) : ''
 
-	return decimalPart
-		? `${padding}${integerPart}.${decimalPart}`
-		: `${padding}${integerPart}`
+	return decimalPart ? `${padding}${integerPart}.${decimalPart}` : `${padding}${integerPart}`
 }
 
 const formattedValue = ref('')
 function inputHandler() {
 	const numeric = formattedValue.value.replace(/[^\d.-]/g, '')
-	const emptyValue = ['', '-', '.', '-.'].includes(numeric)
-	const isTypingDecimal = numeric.endsWith('.')
-	const isTypingTrailingZeros = /\.\d*0$/.test(numeric) // Check if ending with decimal followed by digits ending in 0
+	const isIncomplete = ['', '-', '.', '-.'].includes(numeric) || numeric.endsWith('.') || TRAILING_ZEROS_RE.test(numeric)
 
-	if (emptyValue || isTypingDecimal || isTypingTrailingZeros) {
+	if (isIncomplete) {
 		emit('update:modelValue', numeric === '-' ? '-' : numeric)
-		// Don't reformat while typing decimal values
 		return
 	}
 
 	numberValue.value = Number.parseFloat(numeric)
-	formattedValue.value = emptyValue ? '' : formatNumber(numberValue.value)
+	formattedValue.value = formatNumber(numberValue.value)
 	emit('update:modelValue', numberValue.value)
 }
 
 watch(() => numberValue.value, () => {
 	nextTick(() => {
-		// Don't reformat if user is currently typing a decimal or trailing zeros
-		if (formattedValue.value.endsWith('.') || /\.\d*0$/.test(formattedValue.value)) { return }
+		if (formattedValue.value.endsWith('.') || TRAILING_ZEROS_RE.test(formattedValue.value)) { return }
 		formattedValue.value = numberValue.value !== undefined ? formatNumber(numberValue.value) : ''
 	})
 })
@@ -147,62 +155,60 @@ watch(() => modelValue, (newVal) => {
 	}
 }, { immediate: true })
 
-const hasValue = computed(() => {
-	const val = formattedValue.value
-	return Boolean(val && String(val).length > 0)
-})
+const hasValue = computed(() => formattedValue.value.length > 0)
 </script>
 
 <template>
 	<div
-		class="bagel-input num-input" :class="{
-			'textInputSpinnerWrap': icon || spinner,
-			'txtInputIconStart': iconStart,
-			underlined,
-			'has-error': !!error,
-			'has-value': hasValue,
-		}"
+		class="bagel-input num-input" :class="[
+			shellClass,
+			{
+				underlined,
+				'has-error': !!error,
+				'has-value': hasValue,
+			},
+		]" :style="shellStyle"
 	>
-		<div :for="id">
+		<div>
 			<label v-if="label || (underlined && placeholder)" class="block">
 				<span class="label-text">{{ resolveI18n(label) || resolveI18n(placeholder) }}<span v-if="required"> *</span></span>
 			</label>
-			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
+			<div class="gap-025" :class="{ 'column display-flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
 				<Btn
 					v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius"
-					:class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment"
+					:class="{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }" tabindex="-1" @click="increment"
 				/>
-				<input
-					:id v-model.trim="formattedValue" v-pattern.number type="text" :class="{
-						'txt-center': center,
-						'min0': layout,
-						'bgl-number-input': layout !== 'vertical' && layout !== 'horizontal',
-					}" :placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))" :disabled :required :readonly="disabled" inputmode="decimal"
-					autocomplete="off" :pattern="useGrouping ? '^-?\\d{1,3}(,\\d{3})*(\.\\d+)?$' : '^-?\\d*\.?\d*$'"
-					autocorrect="off" spellcheck="false" @input="inputHandler" @keydown.up.prevent="increment"
-					@keydown.down.prevent="decrement"
-				>
-				<p v-if="helptext" class="opacity-7 light">
-					{{ helptext }}
-				</p>
-				<Icon v-if="iconStart" :class="{ ' bottom-1-25 ': underlined }" class="iconStart" size="0.9" :icon="iconStart" />
-				<Icon v-if="icon" :class="{ ' bottom-1-25 ': underlined }" :icon size="0.9" />
+				<div class="input-icon-wrap flex-grow-1">
+					<Icon v-if="iconStart" class="iconStart" size="0.9" :icon="iconStart" />
+					<input
+						:id v-model.trim="formattedValue" v-pattern.number type="text" :class="{
+							'txt-center': center,
+							'min0': layout,
+						}" :placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))" :disabled :required inputmode="decimal"
+						autocomplete="off" :pattern="useGrouping ? '^-?\\d{1,3}(,\\d{3})*(\.\\d+)?$' : '^-?\\d*\.?\d*$'"
+						autocorrect="off" spellcheck="false" @input="inputHandler" @keydown.up.prevent="increment"
+						@keydown.down.prevent="decrement"
+					>
+					<Icon v-if="icon" size="0.9" :icon />
+					<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner-btns">
+						<Btn
+							icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add top-bgl-ctrl-num-btn" :disabled="!canIncrement"
+							tabindex="-1" @click="increment"
+						/>
+						<Btn
+							icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove" :disabled="!canDecrement"
+							tabindex="-1" @click="decrement"
+						/>
+					</div>
+				</div>
 				<Btn
 					v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius"
 					:class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="decrement"
 				/>
-
-				<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
-					<Btn
-						icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add top-bgl-ctrl-num-btn" :disabled="!canAdd"
-						tabindex="-1" @click="increment"
-					/>
-					<Btn
-						icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove" :disabled="!canDecrement"
-						tabindex="-1" @click="decrement"
-					/>
-				</div>
 			</div>
+			<p v-if="helptext" class="opacity-7 light">
+				{{ helptext }}
+			</p>
 		</div>
 		<div v-if="error" class="error-message">
 			{{ error }}
@@ -211,29 +217,92 @@ const hasValue = computed(() => {
 </template>
 
 <style scoped>
-.txtInputIconStart input {
-	padding-inline-start: calc(var(--input-height) / 1.5);
+.input-icon-wrap {
+	display: flex;
+	align-items: center;
+	background: var(--input-bg);
+	border-radius: var(--input-border-radius);
+	height: var(--input-height);
+	transition: box-shadow 0.2s ease, outline-color 0.2s ease;
+}
+
+.input-icon-wrap input {
+	flex: 1;
+	min-width: 0;
+	background: transparent !important;
+	outline: none !important;
+	box-shadow: none !important;
+}
+
+.input-icon-wrap:focus-within {
+	outline-color: var(--input-bg);
+	box-shadow: inset 0 0 8px #00000018;
 }
 
-.txtInputIconStart .iconStart {
+.input-icon-wrap .iconStart,
+.input-icon-wrap > .bgl_icon-font {
+	flex-shrink: 0;
 	color: var(--input-color);
-	position: absolute;
-	inset-inline-start: calc(var(--input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--input-height) / 2);
 	line-height: 0;
+	padding-inline: 0.35rem;
 }
 
-.textInputSpinnerWrap .spinner {
-	color: var(--input-color);
+/* ── frame variant ─────────────────────────────────────────────── */
+.bagel-input.frame .input-icon-wrap {
+	background: transparent;
+	outline: 1.5px solid var(--border-color);
+	outline-offset: -1px;
+}
+
+.bagel-input.frame .input-icon-wrap:focus-within {
+	outline-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent) !important;
+}
+
+/* ── outline variant ───────────────────────────────────────────── */
+.bagel-input.bgl-outline .input-icon-wrap {
+	outline: 1.5px solid var(--border-color);
+	outline-offset: -1px;
+}
+
+/* ── underlined variant ────────────────────────────────────────── */
+.bagel-input.underlined .input-icon-wrap {
+	position: relative;
+	background: transparent;
+	border-radius: 0;
+	height: auto;
+	border-bottom: 1.5px solid var(--border-color);
+}
+
+.bagel-input.underlined .input-icon-wrap::after {
+	content: '';
 	position: absolute;
-	inset-inline-end: 0;
-	/* margin-top: calc(var(--input-height) / -1 + 0.15rem); */
-	margin-top: calc(var(--input-height) / -1 + (var(--input-height) / 40));
-	line-height: 0;
-	margin-inline-end: 0.25rem;
+	bottom: -1px;
+	inset-inline-start: 0;
+	width: 0;
+	height: 2px;
+	background: var(--bgl-input-label-active-color, var(--bgl-primary));
+	transition: width 0.6s ease;
+	pointer-events: none;
+}
+
+.bagel-input.underlined .input-icon-wrap:focus-within {
+	box-shadow: none;
+}
+
+.bagel-input.underlined .input-icon-wrap:focus-within::after {
+	width: 100%;
+}
+
+.bagel-input.underlined .input-icon-wrap input {
+	border-bottom: none !important;
+}
+
+.spinner-btns {
+	flex-shrink: 0;
 	display: flex;
 	flex-direction: column;
-	gap: 0;
+	margin-inline-end: 0.25rem;
 }
 
 .top-bgl-ctrl-num-btn {
@@ -250,10 +319,6 @@ const hasValue = computed(() => {
 	isolation: isolate;
 }
 
-.bgl-number-input {
-	padding-inline-end: 1.75rem !important;
-}
-
 .bagel-input.has-error input {
 	border-color: var(--bgl-red, #dc3545) !important;
 }

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

@@ -1,7 +1,17 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
-const props = defineProps<{ digitCount: number, default?: string, modelValue?: string, error?: string }>()
+const props = defineProps<{
+	digitCount: number
+	default?: string
+	modelValue?: string
+	error?: string
+} & BagelInputShellProps>()
+
+const { shellClass, shellStyle } = useBagelInputShell(props)
+const hasValue = computed(() => digits.some(d => d !== undefined && d !== ''))
 
 const emit = defineEmits(['update:modelValue', 'complete'])
 const digits = reactive<(number | string | undefined)[]>([])
@@ -87,7 +97,10 @@ function isDigitsFull() {
 </script>
 
 <template>
-	<div>
+	<div
+		class="otp-input" :class="[shellClass, { 'has-value': hasValue }]" :style="shellStyle"
+		tabindex="-1"
+	>
 		<div ref="otpCont" class="otp_wrap ltr" :class="{ 'has-error': !!error }">
 			<input
 				v-for="(_el, ind) in digits" :key="ind" :value="digits[ind] || ''" type="number" inputmode="numeric"
@@ -121,7 +134,7 @@ function isDigitsFull() {
 .digit-box {
 	height: 3rem;
 	flex-grow: 1;
-	border: 1px solid var(--bgl-primary-tint);
+	border: 1px solid var(--bgl-input-label-active-color, var(--bgl-primary-tint));
 	display: inline-block;
 	background: var(--bgl-gray-light);
 	border-radius: 5px;
@@ -145,11 +158,37 @@ function isDigitsFull() {
 }
 
 .digit-box:focus {
-	outline: 1px solid var(--bgl-primary);
-	filter: drop-shadow(0 0 0.25rem var(--bgl-primary));
+	outline: 1px solid var(--bgl-input-label-active-color, var(--bgl-primary));
+	filter: drop-shadow(0 0 0.25rem var(--bgl-input-label-active-color, var(--bgl-primary)));
+	outline-offset: 1px;
+}
+
+/* ── frame variant ──────────────────────────────────────────────────────── */
+
+.otp-input.frame .digit-box {
+	background: transparent;
+	outline: 1.5px solid var(--border-color);
+	outline-offset: -1px;
+	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.otp-input.frame .digit-box:focus {
+	outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
+	outline-width: 2px;
+	box-shadow:
+		0 0 0 4px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 15%, transparent),
+		0 2px 8px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 25%, transparent);
+	filter: none;
+}
+
+/* ── bgl-outline variant ────────────────────────────────────────────────── */
+
+.otp-input.bgl-outline .digit-box {
+	outline: 1.5px solid var(--border-color);
+	outline-offset: -1px;
 }
 
-/* Redundant, already covered above */
+ /* Redundant, already covered above */
 /* .digit-box[type="number"] {
     -moz-appearance: textfield;
 } */

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

@@ -1,49 +1,60 @@
 <script setup lang="ts">
-import type { IconType } from '@bagelink/vue'
+import type { IconType, ValidateInputBaseT } from '@bagelink/vue'
 import { Btn, TextInput, useI18n } from '@bagelink/vue'
 import { zxcvbn } from '@zxcvbn-ts/core'
 import { computed } from 'vue'
+import type { BagelInputShellProps } from './bagelInputShell'
 
-const props = withDefaults(
-	defineProps<TextInputProps>(),
-	{
-		autocomplete: 'current-password',
-		label: '',
-		strengthMeter: false
-	}
-)
-
-const { $t } = useI18n()
-
-export interface TextInputProps {
+export interface TextInputProps extends ValidateInputBaseT, BagelInputShellProps {
 	id?: string
 	title?: string
 	helptext?: string
+	name?: string
 	placeholder?: string
+	modelValue?: string
 	label?: string
 	small?: boolean
 	dense?: boolean
 	required?: boolean
 	pattern?: string
+	defaultValue?: string
 	shrink?: boolean
 	underlined?: boolean
 	disabled?: boolean
-	name?: string
+	type?: string
 	nativeInputAttrs?: { [key: string]: any }
 	icon?: IconType
 	iconStart?: IconType
 	multiline?: boolean
 	autoheight?: boolean
 	code?: boolean
-	lines?: number
+	rows?: number | string
+	autocomplete?: string
 	autofocus?: boolean
-	debounceDelay?: number
-	autocomplete?: AutoFillField
+	error?: string
 	onFocusout?: (e: FocusEvent) => void
+	onFocus?: (e: FocusEvent) => void
+}
+
+export interface PasswordInputProps extends TextInputProps {
 	strengthMeter?: boolean
-	error?: string
 }
-const password = defineModel<string>('modelValue')
+
+const props = withDefaults(defineProps<PasswordInputProps>(), {
+	autocomplete: 'current-password',
+	label: '',
+	strengthMeter: false,
+})
+
+const { $t } = useI18n()
+
+const textInputProps = computed(() => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { strengthMeter: _strengthMeter, modelValue: _modelValue, ...rest } = props
+	return rest
+})
+
+const password = defineModel<string>()
 const showPwd = defineModel<boolean>('showPwd', { default: false })
 
 const toggleShowPwdIcon = computed(() => showPwd.value ? 'visibility_off' : 'visibility')
@@ -94,14 +105,14 @@ const feedbackMessage = computed(() => {
 	if (!strength)
 		return ''
 	const { feedback: { warning, suggestions } } = strength
-	const warnings = (warning != null && warning !== '') ? [warning] : []
+	const warnings = warning ? [warning] : []
 	return [...warnings, ...suggestions].join(' ')
 })
 </script>
 
 <template>
 	<div class="relative passwordInput" :class="{ 'relative mb-2': props.strengthMeter, 'has-error': !!props.error, 'underlined': props.underlined }">
-		<TextInput v-model="password" v-bind="props" :type="inputType" class="mb-0" :name="props.name" :error="props.error" :underlined="props.underlined" />
+		<TextInput v-model="password" v-bind="textInputProps" :type="inputType" class="mb-0" />
 		<div class="m-password position-bottom-end flex column justify-content-center">
 			<Btn flat thin class="mx-05" :icon="toggleShowPwdIcon" @click="showPwd = !showPwd" />
 		</div>

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

@@ -3,6 +3,8 @@ import type { Option } from '@bagelink/vue'
 import { Btn, Icon, resolveI18n } from '@bagelink/vue'
 import { computed, ref, watch } from 'vue'
 import { normalizeOption } from '../../../utils/options'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
 export interface RadioOption<T = any> {
 	imgAlt?: string
@@ -36,10 +38,11 @@ const props = withDefaults(
 		hideRadio?: boolean
 		bgColor?: string
 		activeBgColor?: string
+		activeTextColor?: string
 		borderColor?: string
 		textColor?: string
 		textAlign?: 'left' | 'center' | 'right'
-	}>(),
+	} & BagelInputShellProps>(),
 	{
 		align: 'center'
 	}
@@ -47,6 +50,8 @@ const props = withDefaults(
 
 const emit = defineEmits(['delete', 'focus', 'blur', 'change'])
 
+const { shellClass, shellStyle } = useBagelInputShell(props)
+
 const name = computed(
 	() => (
 		props.groupName
@@ -78,9 +83,13 @@ watch(() => props.options, () => {
 const isFocused = ref(false)
 
 const containerClasses = computed(() => ({
+	'bagel-input': true,
+	...shellClass.value,
 	'has-error': !!props.error,
 	'is-disabled': props.disabled,
-	'is-focused': isFocused.value
+	'is-focused': isFocused.value,
+	'has-value': selectedOption.value != null && selectedOption.value !== '',
+	'open': isFocused.value,
 }))
 
 function handleFocus() {
@@ -99,7 +108,7 @@ function handleChange() {
 </script>
 
 <template>
-	<div :class="containerClasses">
+	<div :class="containerClasses" :style="shellStyle">
 		<p v-if="label" class="group-label">
 			{{ resolveI18n(label) }} <span v-if="required">*</span>
 		</p>
@@ -129,11 +138,11 @@ function handleChange() {
 	</div>
 </template>
 
+
 <style scoped>
 .group-label {
 	font-size: var(--label-font-size);
 	margin: 0 0 0.25rem 0;
-    color: var(--label-color);
 }
 
 .hideRadio.radio-input-list {
@@ -142,9 +151,9 @@ function handleChange() {
 
 .radio-input-list {
 	width: auto;
-	transform: scale(1.2);
 	margin-inline-end: 0.5rem;
 	margin-top: 0;
+	accent-color: var(--bgl-input-label-active-color, var(--bgl-primary));
 }
 
 .radio-input-list.hidden {
@@ -153,8 +162,9 @@ function handleChange() {
 
 .active-list-item:has(:checked) {
 	background: v-bind('activeBgColor || "var(--bgl-primary-light)"') !important;
-	border-color: var(--bgl-primary) !important;
-	accent-color: var(--bgl-accent-color);
+	border-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+	accent-color: var(--bgl-input-label-active-color, var(--bgl-primary));
+	color: v-bind('activeTextColor || null') !important;
 }
 
 .invertedActive:has(:checked) {
@@ -171,4 +181,5 @@ function handleChange() {
 .has-error :is(input[type="radio"]) {
 	accent-color: var(--bgl-red);
 }
+
 </style>