@bagelink/vue 1.15.112 → 1.15.114

package/package.json

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

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

@@ -5,6 +5,7 @@ import { onClickOutside } from '@vueuse/core'
 import { ref, computed, onMounted, watch } from 'vue'
 import { WEEK_START_DAY } from '../../../utils/calendar/time'
 import DatePicker from './DatePicker.vue'
+import type { DateRangeValue } from './DatePicker.vue'
 import type { BagelInputShellProps } from './bagelInputShell'
 import { useBagelInputShell } from './bagelInputShell'
 
@@ -19,7 +20,13 @@ export interface DateInputProps extends BagelInputShellProps {
 	 * @default false
 	 */
 	enableTime?: boolean
-	modelValue?: string | Date
+	/**
+	 * Select a start/end date range in a single input.
+	 * When true, `modelValue` is a `{ start, end }` object.
+	 * @default false
+	 */
+	range?: boolean
+	modelValue?: string | Date | DateRangeValue
 	min?: string | Date
 	max?: string | Date
 	mode?: ModeType
@@ -37,6 +44,7 @@ const props = withDefaults(
 		enableTime: false,
 		editMode: true,
 		small: false,
+		range: false,
 		mode: () => ({ mode: 'day' }),
 		firstDayOfWeek: WEEK_START_DAY.SUNDAY,
 		locale: ''
@@ -47,7 +55,9 @@ const { $t } = useI18n()
 
 const { shellClass, shellStyle } = useBagelInputShell(props)
 
-const selectedDate = defineModel<string | Date>()
+const selectedDate = defineModel<string | Date | DateRangeValue>()
+
+const RANGE_SEPARATOR = ' - '
 const inputValue = ref('')
 const isValid = ref(true)
 const isTyping = ref(false)
@@ -58,11 +68,22 @@ const datePickerRef = ref<HTMLElement | null>(null)
 const calendarRef = ref<HTMLElement | null>(null)
 
 // Formatting utilities
-function formatDisplayDate(date: Date | string | undefined): string {
+function formatSingleDate(date: Date | string | undefined): string {
 	if (date === undefined || date === '') return ''
 	return formatDate(date, { format: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
 }
 
+function formatDisplayDate(value: Date | string | DateRangeValue | undefined): string {
+	if (props.range) {
+		const range = (value ?? {}) as DateRangeValue
+		const start = formatSingleDate(range.start)
+		const end = formatSingleDate(range.end)
+		if (!start && !end) return ''
+		return `${start}${RANGE_SEPARATOR}${end}`
+	}
+	return formatSingleDate(value as Date | string | undefined)
+}
+
 function parseUserInput(input: string): Date | null {
 	const date = new Date(input)
 	if (!Number.isNaN(date.getTime())) return date
@@ -88,25 +109,41 @@ function normalizeDate(date: Date): string {
 	return normalized.toISOString().split('T')[0]
 }
 
+function hasModelValue(): boolean {
+	if (props.range) {
+		const range = selectedDate.value as DateRangeValue | undefined
+		return !!(range && (range.start || range.end))
+	}
+	return selectedDate.value !== undefined
+}
+
 function syncInputValue() {
 	if (!isTyping.value) {
-		inputValue.value = selectedDate.value !== undefined ? formatDisplayDate(selectedDate.value) : ''
+		inputValue.value = hasModelValue() ? formatDisplayDate(selectedDate.value) : ''
 	}
 }
 
+// Format a single "DD.MM.YY" fragment as the user types (auto-insert dots).
+function autoFormatDatePart(raw: string): string {
+	const cleaned = raw.replace(/[^\d.]/g, '')
+	const parts = cleaned.split('.')
+	let formatted = parts.slice(0, 3).join('.')
+	if (formatted.length === 2 && !formatted.includes('.')) formatted += '.'
+	else if (formatted.length === 5 && parts.length === 2) formatted += '.'
+	return formatted
+}
+
 // Event handlers
 function handleInput(event: Event) {
 	const input = event.target as HTMLInputElement
 	isTyping.value = true
 
-	// Auto-format: clean and add dots after DD and MM
-	const cleaned = input.value.replace(/[^\d.]/g, '')
-	const parts = cleaned.split('.')
-	let formatted = parts.slice(0, 3).join('.')
-
-	if (formatted.length === 2 && !formatted.includes('.')) formatted += '.'
-	else if (formatted.length === 5 && parts.length === 2) formatted += '.'
+	if (props.range) {
+		handleRangeInput(input)
+		return
+	}
 
+	const formatted = autoFormatDatePart(input.value)
 	inputValue.value = formatted
 	if (input.value !== formatted) input.value = formatted
 
@@ -123,6 +160,49 @@ function handleInput(event: Event) {
 	}
 }
 
+function handleRangeInput(input: HTMLInputElement) {
+	// Split on the separator (tolerate a bare "-" typed by the user)
+	const [rawStart = '', rawEnd = ''] = input.value.split(/\s*-\s*/, 2)
+	const startFmt = autoFormatDatePart(rawStart)
+	const endFmt = autoFormatDatePart(rawEnd)
+
+	// Reassemble display; only show separator once the user moved past the start
+	const typedSeparator = /-/.test(input.value)
+	const formatted = (endFmt || typedSeparator)
+		? `${startFmt}${RANGE_SEPARATOR}${endFmt}`
+		: startFmt
+
+	inputValue.value = formatted
+	if (input.value !== formatted) input.value = formatted
+
+	const startDate = rawStart ? parseUserInput(startFmt) : null
+	const endDate = rawEnd ? parseUserInput(endFmt) : null
+
+	// Invalid only if a non-empty part fails to parse
+	if ((rawStart && !startDate) || (rawEnd && !endDate)) {
+		isValid.value = false
+		return
+	}
+
+	isValid.value = true
+	if (!startDate && !endDate) {
+		selectedDate.value = undefined
+		return
+	}
+
+	// Order endpoints if both present
+	let lo = startDate
+	let hi = endDate
+	if (startDate && endDate && endDate < startDate) {
+		lo = endDate
+		hi = startDate
+	}
+	selectedDate.value = {
+		start: lo ? normalizeDate(lo) : undefined,
+		end: hi ? normalizeDate(hi) : undefined,
+	}
+}
+
 function handleFocus() {
 	if (!isClosing) isOpen.value = true
 }
@@ -132,7 +212,7 @@ function handleBlur() {
 	if (inputValue.value.length === 0) {
 		selectedDate.value = undefined
 		isValid.value = true
-	} else if (selectedDate.value !== undefined) {
+	} else if (hasModelValue()) {
 		inputValue.value = formatDisplayDate(selectedDate.value)
 		isValid.value = true
 	} else {
@@ -153,15 +233,16 @@ function handleKeydown(event: KeyboardEvent) {
 	if (key === 'Escape') {
 		isOpen.value = false
 		isTyping.value = false
-		inputValue.value = selectedDate.value !== undefined ? formatDisplayDate(selectedDate.value) : ''
+		inputValue.value = hasModelValue() ? formatDisplayDate(selectedDate.value) : ''
 		isValid.value = true
 	} else if (key === 'Enter') {
 		isTyping.value = false
-		if (selectedDate.value !== undefined) inputValue.value = formatDisplayDate(selectedDate.value)
+		if (hasModelValue()) inputValue.value = formatDisplayDate(selectedDate.value)
 		isOpen.value = false
-	} else if (key === 'ArrowUp' || key === 'ArrowDown') {
+	} else if (!props.range && (key === 'ArrowUp' || key === 'ArrowDown')) {
+		// Arrow-key increment only applies to single-date mode
 		event.preventDefault()
-		const date = selectedDate.value !== undefined ? new Date(selectedDate.value) : new Date()
+		const date = selectedDate.value !== undefined ? new Date(selectedDate.value as string | Date) : new Date()
 		const increment = key === 'ArrowUp' ? 1 : -1
 
 		if (shiftKey) date.setMonth(date.getMonth() + increment)
@@ -181,6 +262,11 @@ watch(() => selectedDate.value, syncInputValue, { immediate: true })
 
 const hasValue = computed(() => inputValue.value.length > 0)
 
+const defaultPlaceholder = computed(() => {
+	const single = props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY'
+	return props.range ? `${single}${RANGE_SEPARATOR}${single}` : single
+})
+
 onClickOutside(datePickerRef, () => {
 	isClosing = true
 	isOpen.value = false
@@ -188,7 +274,7 @@ onClickOutside(datePickerRef, () => {
 }, { ignore: [calendarRef] })
 
 onMounted(() => {
-	if (selectedDate.value === undefined && props.defaultValue !== undefined) {
+	if (!props.range && selectedDate.value === undefined && props.defaultValue !== undefined) {
 		selectedDate.value = props.defaultValue
 	}
 })
@@ -208,7 +294,7 @@ onMounted(() => {
 					<div ref="datePickerRef" class="date-picker-container">
 						<TextInput
 							v-model="inputValue" iconStart="calendar"
-							:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || (enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY'))"
+							:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || defaultPlaceholder)"
 							:required="underlined ? false : required" :disabled="!editMode"
 							:error="!isValid ? $t('date.invalidFormat') : error" :class="{ 'txt-center': center }"
 							:underlined="underlined" :frame="frame" :outline="outline" :min-width="minWidth"
@@ -223,6 +309,7 @@ onMounted(() => {
 					<DatePicker
 						v-model="selectedDate" :min="min" :max="max" :mode="mode"
 						:firstDayOfWeek="firstDayOfWeek" :locale="locale" :enableTime="enableTime"
+						:range="range"
 					/>
 				</div>
 			</Dropdown>

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

@@ -5,15 +5,26 @@ import { Btn, NumberInput } from '@bagelink/vue'
 import { computed, ref, toValue } from 'vue'
 import Time, { WEEK_START_DAY } from '../../../utils/calendar/time'
 
+export interface DateRangeValue {
+	start?: string
+	end?: string
+}
+
 const props = withDefaults(
 	defineProps<{
-		modelValue?: string | Date
+		modelValue?: string | Date | DateRangeValue
 		min?: string | Date
 		max?: string | Date
 		mode?: ModeType
 		firstDayOfWeek?: WEEK_START_DAY
 		locale?: string
 		enableTime?: boolean
+		/**
+		 * Whether to select a start/end date range instead of a single date.
+		 * When true, `modelValue` is a `{ start, end }` object.
+		 * @default false
+		 */
+		range?: boolean
 		highlightedDates?: MaybeRefOrGetter<(string | Date)[]>
 		disabledDates?: MaybeRefOrGetter<(string | Date)[]>
 		allowedDates?: MaybeRefOrGetter<(string | Date)[]>
@@ -24,11 +35,15 @@ const props = withDefaults(
 		firstDayOfWeek: WEEK_START_DAY.SUNDAY,
 		locale: '',
 		enableTime: false,
+		range: false,
 	},
 )
 
 const emit = defineEmits(['update:modelValue'])
 
+// Tentative end date hovered during range selection
+const hoverDate = ref<Date | null>(null)
+
 const computedHighlightedDates = computed(() => toValue(props.highlightedDates))
 const computedDisabledDates = computed(() => toValue(props.disabledDates))
 const computedAllowedDates = computed(() => toValue(props.allowedDates))
@@ -128,17 +143,36 @@ function useDateValidation() {
 // Date state composable
 function useDateState() {
 	const selectedDate = computed(() => {
-		return parseDate(props.modelValue)
+		return parseDate(props.range ? undefined : (props.modelValue as string | Date | undefined))
+	})
+
+	const rangeStart = computed(() => {
+		if (!props.range) { return null }
+		return parseDate((props.modelValue as DateRangeValue | undefined)?.start)
+	})
+
+	const rangeEnd = computed(() => {
+		if (!props.range) { return null }
+		return parseDate((props.modelValue as DateRangeValue | undefined)?.end)
 	})
 
 	return {
-		selectedDate
+		selectedDate,
+		rangeStart,
+		rangeEnd
 	}
 }
 
 // Initialize core composables
 const { isDateDisabled, isMonthDisabled, isYearDisabled } = useDateValidation()
-const { selectedDate } = useDateState()
+const { selectedDate, rangeStart, rangeEnd } = useDateState()
+
+function isSameDay(a: Date | null, b: Date | null): boolean {
+	if (!a || !b) { return false }
+	return a.getFullYear() === b.getFullYear()
+		&& a.getMonth() === b.getMonth()
+		&& a.getDate() === b.getDate()
+}
 
 // Calendar view composable
 function useCalendarView() {
@@ -200,10 +234,35 @@ function useCalendarView() {
 	})
 
 	const isSelected = (date: Date | null) => {
-		if (!date || !selectedDate.value) { return false }
-		return date.getFullYear() === selectedDate.value.getFullYear()
-			&& date.getMonth() === selectedDate.value.getMonth()
-			&& date.getDate() === selectedDate.value.getDate()
+		if (!date) { return false }
+		if (props.range) {
+			return isSameDay(date, rangeStart.value) || isSameDay(date, rangeEnd.value)
+		}
+		if (!selectedDate.value) { return false }
+		return isSameDay(date, selectedDate.value)
+	}
+
+	// Effective end of the range for display: committed end, or the hovered date
+	// while the user is picking the second endpoint.
+	const previewEnd = computed(() => {
+		if (rangeEnd.value) { return rangeEnd.value }
+		if (rangeStart.value && hoverDate.value) { return hoverDate.value }
+		return null
+	})
+
+	const isRangeStart = (date: Date | null) => props.range && isSameDay(date, rangeStart.value)
+	const isRangeEnd = (date: Date | null) => props.range && isSameDay(date, rangeEnd.value)
+
+	const isInRange = (date: Date | null) => {
+		if (!props.range || !date || !rangeStart.value) { return false }
+		const end = previewEnd.value
+		if (!end) { return false }
+		const lo = rangeStart.value < end ? rangeStart.value : end
+		const hi = rangeStart.value < end ? end : rangeStart.value
+		const d = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+		const loD = new Date(lo.getFullYear(), lo.getMonth(), lo.getDate())
+		const hiD = new Date(hi.getFullYear(), hi.getMonth(), hi.getDate())
+		return d > loD && d < hiD
 	}
 
 	const isToday = (date: Date | null) => {
@@ -243,6 +302,9 @@ function useCalendarView() {
 		years,
 		weekDays,
 		isSelected,
+		isRangeStart,
+		isRangeEnd,
+		isInRange,
 		isToday,
 		isNotInMonth,
 		isHighlighted
@@ -336,6 +398,9 @@ const {
 	years,
 	weekDays,
 	isSelected,
+	isRangeStart,
+	isRangeEnd,
+	isInRange,
 	isToday,
 	isNotInMonth,
 	isHighlighted
@@ -343,10 +408,42 @@ const {
 const { selectMonth, selectYear, previousMonth, nextMonth, previousYear, nextYear } = useNavigation()
 const { hours, minutes, handleHourInput, handleMinuteInput } = useTimeHandling()
 
+function toDayString(date: Date): string {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate()).toISOString()
+}
+
+// Range selection handler: first click sets start (clears end), second click
+// sets end (ordering start/end automatically). A third click starts over.
+function selectRange(date: Date) {
+	const start = rangeStart.value
+	const end = rangeEnd.value
+
+	if (!start || end) {
+		// Start a new range
+		emit('update:modelValue', { start: toDayString(date), end: undefined })
+		return
+	}
+
+	// Completing the range — order the two endpoints
+	const lo = date < start ? date : start
+	const hi = date < start ? start : date
+	emit('update:modelValue', { start: toDayString(lo), end: toDayString(hi) })
+	hoverDate.value = null
+}
+
+function onDayHover(date: Date | null) {
+	if (props.range && date) { hoverDate.value = date }
+}
+
 // Date selection handler
 function selectDate(date: Date | null) {
 	if (!date) { return }
 
+	if (props.range) {
+		selectRange(date)
+		return
+	}
+
 	if (props.enableTime) {
 		// Create date with current time values
 		const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
@@ -400,11 +497,15 @@ function selectDate(date: Date | null) {
 					class="day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0"
 					:class="{
 						'selected': isSelected(date),
+						'range-start': isRangeStart(date),
+						'range-end': isRangeEnd(date),
+						'in-range': isInRange(date),
 						'today': isToday(date),
 						'disabled': isDateDisabled(date),
 						'not-in-month': isNotInMonth(date),
 						'highlighted': isHighlighted(date),
 					}" :disabled="isDateDisabled(date)" @click="selectDate(date)"
+					@mouseenter="onDayHover(date)"
 				>
 					{{ date?.getDate() }}
 				</button>
@@ -529,6 +630,21 @@ color: var(--bgl-white);
 border: 1px solid var(--bgl-primary);
 }
 
+.day.in-range:not(.selected) {
+background-color: var(--bgl-secondary-light, rgba(var(--bgl-primary-rgb, 0, 123, 255), 0.15));
+border-radius: 0;
+}
+
+.day.range-start:not(.range-end) {
+border-top-right-radius: 0;
+border-bottom-right-radius: 0;
+}
+
+.day.range-end:not(.range-start) {
+border-top-left-radius: 0;
+border-bottom-left-radius: 0;
+}
+
 .day.disabled {
 opacity: 0.6;
 filter: grayscale(0.3);

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

@@ -303,7 +303,7 @@ onMounted(() => {
 						<div v-if="clearable && selectedItemCount > 0" class="ms-auto ps-05 me-05">
 							<Btn flat thin icon="clear" class="color-gray" @click="selectedItems = []; emitUpdate()" />
 						</div>
-						<Icon v-if="!disabled" thin transition="rotate" :icon="open ? (underlined ? 'expand_less' : 'unfold_less') : (underlined ? 'expand_more' : 'unfold_more')" />
+						<Icon v-if="!disabled" thin transition="scale" :icon="open ? (underlined ? 'expand_less' : 'unfold_less') : (underlined ? 'expand_more' : 'unfold_more')" />
 					</button>
 					<input
 						v-if="required && !underlined" tabindex="-1"

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

@@ -244,29 +244,55 @@ gap: 0.5rem;
 background: var(--input-disabled-bg);
 }
 
-.textInputIconWrap .bgl_icon-font {
-color: var(--bgl-input-color);
-position: absolute;
-inset-inline-end: calc(var(--bgl-input-height) / 3 - 0.25rem);
-/* center on the input row regardless of input height (dense/small/default) */
+/* Icon centering.
+   The icon is absolutely positioned inside the <label>, whose only positioned ancestor
+   is `.bagel-input`. In the DEFAULT variant the label text is in normal flow and pushes
+   the input DOWN, but the old `top: input-height/2` was measured from the component top —
+   so with a label the icon rode up onto the label text (the misalignment).
+
+   Fix: make the <label> the containing block and anchor the icon into a band the height
+   of the input row pinned to the BOTTOM of the label (the input is the last row), then
+   flex-center it. Bottom-anchored + fixed band height ⇒ centered on the input regardless
+   of a label above, and in dense/small modes. Scoped to :not(.underlined) because the
+   underlined variant floats its label as an overlay (input isn't pushed down). */
+.bagel-input:not(.underlined).textInputIconWrap > label,
+.bagel-input:not(.underlined).txtInputIconStart > label {
+position: relative;
+display: block;
+}
+
+.bagel-input:not(.underlined).textInputIconWrap .bgl_icon-font,
+.bagel-input:not(.underlined).txtInputIconStart .iconStart {
+top: auto;
+bottom: calc(var(--bgl-input-height) / 2);
+transform: translateY(50%);
+}
+
+/* underlined: label floats as an overlay, so the original top-center is correct */
+.underlined.textInputIconWrap .bgl_icon-font,
+.underlined.txtInputIconStart .iconStart {
 top: calc(var(--bgl-input-height) / 2);
 transform: translateY(-50%);
+}
+
+.textInputIconWrap .bgl_icon-font,
+.txtInputIconStart .iconStart {
+color: var(--bgl-input-color);
+position: absolute;
 line-height: 0;
 }
 
+.textInputIconWrap .bgl_icon-font {
+inset-inline-end: calc(var(--bgl-input-height) / 3 - 0.25rem);
+}
+
 .textInputIconWrap input,
 .textInputIconWrap textarea {
 padding-inline-end: calc(var(--bgl-input-height) / 3 + 1.5rem);
 }
 
 .txtInputIconStart .iconStart {
-color: var(--bgl-input-color);
-position: absolute;
 inset-inline-start: calc(var(--bgl-input-height) / 3 - 0.25rem);
-/* center on the input row regardless of input height (dense/small/default) */
-top: calc(var(--bgl-input-height) / 2);
-transform: translateY(-50%);
-line-height: 0;
 }
 
 .txtInputIconStart input,

package/src/styles/dark.css

@@ -25,10 +25,8 @@
      #00000020 (translucent dark). Blends over any dark surface (bg, card,
      input) instead of being a fixed opaque gray. */
 
-  /* ---- Brand (slightly adjusted for dark backgrounds) ------------------- */
-  --bgl-primary: #4f7cff !important;
-  --bgl-primary-tint: #4f7cff33;
-  --bgl-primary-light: #1a2236;
+  /* ---- Brand (derived from the project's --bgl-primary, not hardcoded) --- */
+  --bgl-primary-tint: color-mix(in srgb, var(--bgl-primary) 20%, transparent);
 
   /* ---- Status / accent colors (tuned for dark backgrounds) ------------- *
 	 * The light-mode bases (e.g. blue #2e5bff, green #75c98f, red #ed6c6f,