@bagelink/vue 1.4.71 → 1.4.77

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.71",
+  "version": "1.4.77",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -2,7 +2,7 @@
 import type { IconType, ThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
 import { Icon, Loading } from '@bagelink/vue'
-import { useSlots } from 'vue'
+import { useSlots, ref, onMounted, onUnmounted } from 'vue'
 import { RouterLink } from 'vue-router'
 
 const props = withDefaults(
@@ -10,6 +10,8 @@ const props = withDefaults(
 		disabled?: boolean
 		icon?: IconType
 		iconEnd?: IconType
+		iconSize?: number | string
+		iconMobileSize?: number | string
 		color?: ThemeType
 		theme?: ThemeType
 		flat?: boolean
@@ -41,6 +43,26 @@ const props = withDefaults(
 	},
 )
 
+const isMobileScreen = ref(false)
+
+const checkMobile = () => {
+	isMobileScreen.value = window.innerWidth <= 910
+}
+
+onMounted(() => {
+	checkMobile()
+	window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', checkMobile)
+})
+
+const iconSizeComputed = $computed(() => {
+	if (props.iconSize !== undefined) return props.iconSize
+	return isMobileScreen.value ? 1 : 1.2
+})
+
 const isComponent = $computed(() => {
 	if (props.disabled) return props.is
 	if (props.to) return RouterLink
@@ -64,34 +86,25 @@ const slots: SetupContext['slots'] = useSlots()
 </script>
 
 <template>
-	<component
-		:is="isComponent"
-		v-ripple="ripple" v-bind="bind" :disabled="disabled"
-		class="bgl_btn"
-		:class="{
-			'bgl_btn-icon': icon && !slots.default && !value,
-			thin,
-			round,
-			'bgl_btn_flat': flat,
-			'bgl_btn-border': border || outline,
-			[`bgl_btn-${color}`]: color,
-			[`bgl_btn-${theme}`]: theme,
-		}"
-		:tabindex="disabled ? -1 : 0"
-		@click.stop="onClick"
-		@keydown.enter="onClick"
-		@keydown.space="onClick"
-	>
-		<Loading v-if="loading" class="h-100p" size="15" />
-		<div v-else class="bgl_btn-flex">
-			<Icon v-if="icon" :icon="icon" class="transition-400" />
-			<slot />
-			<template v-if="!slots.default && value">
-				{{ value }}
-			</template>
-			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
-		</div>
-	</component>
+<component :is="isComponent" v-ripple="ripple" v-bind="bind" :disabled="disabled" class="bgl_btn" :class="{
+	'bgl_btn-icon': icon && !slots.default && !value,
+	thin,
+	round,
+	'bgl_btn_flat': flat,
+	'bgl_btn-border': border || outline,
+	[`bgl_btn-${color}`]: color,
+	[`bgl_btn-${theme}`]: theme,
+}" :tabindex="disabled ? -1 : 0" @click.stop="onClick" @keydown.enter="onClick" @keydown.space="onClick">
+	<Loading v-if="loading" class="h-100p" size="15" />
+	<div v-else class="bgl_btn-flex">
+		<Icon v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
+		<slot />
+		<template v-if="!slots.default && value">
+			{{ value }}
+		</template>
+		<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" :size="iconSizeComputed" :mobile-size="iconMobileSize" />
+	</div>
+</component>
 </template>
 
 <style scoped>

package/src/components/Dropdown.vue

@@ -24,6 +24,12 @@ const {
 	noAutoFocus,
 	autoHide = true,
 	triggers = ['click'],
+	showTriggers,
+	hideTriggers,
+	popperTriggers = [],
+	popperShowTriggers = [],
+	popperHideTriggers = [],
+	delay,
 
 } = defineProps<{
 	value?: string
@@ -42,6 +48,12 @@ const {
 	noAutoFocus?: boolean
 	autoHide?: boolean
 	triggers?: TriggerEvent[]
+	showTriggers?: TriggerEvent[]
+	hideTriggers?: TriggerEvent[]
+	popperTriggers?: TriggerEvent[]
+	popperShowTriggers?: TriggerEvent[]
+	popperHideTriggers?: TriggerEvent[]
+	delay?: number | { show: number, hide: number }
 	// theme
 	// referenceNode
 	// shown
@@ -95,45 +107,74 @@ const shouldDisablePositioning = $computed(() => {
 	return disablePlacement && isMobile
 })
 
+// Intelligent trigger configuration
+const computedShowTriggers = $computed((): TriggerEvent[] => {
+	if (showTriggers !== undefined) return showTriggers
+	return triggers
+})
+
+const computedHideTriggers = $computed((): TriggerEvent[] => {
+	if (hideTriggers !== undefined) return hideTriggers
+	// For click-only dropdowns, only hide on click
+	if (triggers.length === 1 && triggers[0] === 'click') {
+		return ['click'] as TriggerEvent[]
+	}
+	// For hover dropdowns, add click to hide triggers for better UX
+	if (triggers.includes('hover')) {
+		return [...triggers, 'click'] as TriggerEvent[]
+	}
+	return triggers
+})
+
+const computedPopperTriggers = $computed((): TriggerEvent[] => {
+	if (popperTriggers.length > 0) return popperTriggers
+	// For hover dropdowns, enable hover on popper to keep it open
+	if (triggers.includes('hover')) {
+		return ['hover'] as TriggerEvent[]
+	}
+	return []
+})
+
+const computedPopperHideTriggers = $computed((): TriggerEvent[] => {
+	if (popperHideTriggers && popperHideTriggers.length > 0) return popperHideTriggers
+	// For hover dropdowns, make sure popper hides on mouseout
+	if (triggers.includes('hover')) {
+		return ['hover'] as TriggerEvent[]
+	}
+	return []
+})
+
+const computedAutoHide = $computed(() => {
+	// Both hover and click dropdowns should support autoHide for outside click behavior
+	return autoHide
+})
+
+const computedDelay = $computed((): number | { show: number, hide: number } | undefined => {
+	if (delay !== undefined) return delay
+	// For hover dropdowns, add a hide delay
+	if (triggers.includes('hover')) {
+		return { show: 0, hide: 50 } // 50ms delay before hiding
+	}
+	// For click dropdowns, no delay
+	return 0
+})
+
 defineExpose({ show, hide, shown })
 </script>
 
 <template>
 	<DDown
-		ref="ddownRef"
-		v-model:shown="shown"
-		:disabled
-		:noAutoFocus
-		:positioning-disabled="shouldDisablePositioning"
-		:placement
-		:autoHide
-		:triggers
-		@hide="emit('hide')"
-		@show="emit('show')"
+		ref="ddownRef" v-model:shown="shown" :disabled :noAutoFocus :positioning-disabled="shouldDisablePositioning"
+		:placement :autoHide="computedAutoHide" :delay="computedDelay" :triggers :showTriggers="computedShowTriggers"
+		:hideTriggers="computedHideTriggers" :popperTriggers="computedPopperTriggers" :popperShowTriggers
+		:popperHideTriggers="computedPopperHideTriggers" @hide="emit('hide')" @show="emit('show')"
 	>
 		<div ref="triggerRef" />
-		<slot
-			name="trigger"
-			:show
-			:hide
-		>
-			<Btn
-				:class="triggerClass"
-				:iconEnd
-				:icon
-				:value
-				:thin
-				:flat
-				:outline
-				:round
-				:color
-			/>
+		<slot name="trigger" :show :hide :shown>
+			<Btn :class="triggerClass" :iconEnd :icon :value :thin :flat :outline :round :color />
 		</slot>
-		<template #popper="{ hide, show }">
-			<slot
-				:hide
-				:show
-			/>
+		<template #popper="{ hide: hidePopper, show: showPopper, shown: popperShown }">
+			<slot :hide="hidePopper" :show="showPopper" :shown="popperShown" />
 		</template>
 	</DDown>
 </template>

package/src/components/Icon/Icon.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { IconType } from '@bagelink/vue'
 import { FONT_AWESOME_ICONS, MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 const props = withDefaults(defineProps<{
 	icon?: IconType
 	name?: IconType
 	size?: number | string
+	mobileSize?: number | string
 	color?: string
 	round?: boolean
 	weight?: number | string
@@ -17,6 +19,28 @@ const props = withDefaults(defineProps<{
 
 const iconRender = $computed(() => props.icon || props.name) as IconType
 
+const isMobile = ref(false)
+
+const checkMobile = () => {
+	isMobile.value = window.innerWidth <= 910
+}
+
+onMounted(() => {
+	checkMobile()
+	window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', checkMobile)
+})
+
+const computedSize = $computed(() => {
+	if (isMobile.value && props.mobileSize !== undefined) {
+		return props.mobileSize
+	}
+	return props.size
+})
+
 const iconRenderType = $computed(() => {
 	if (props.fontAwesome && (FONT_AWESOME_ICONS.includes(iconRender) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender))) return 'font-awesome'
 	if (MATERIAL_ICONS.includes(iconRender)) return 'material'
@@ -32,11 +56,12 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 		v-if="iconRenderType === 'material'"
 		class="bgl_icon-font notranslate"
 		:class="{ 'round flex aspect-ratio-1 justify-content-center': round }"
-		:style="{ 'fontSize': `${size}rem`,
+		:style="{
+			'fontSize': `${computedSize}rem`,
 			color,
 			'font-variation-settings': `'FILL' ${fill ? 1 : 0}, 'wght' ${weight || 400}`,
-			'width': round ? `calc(${size}rem * 2)` : 'auto',
-			'height': round ? `calc(${size}rem * 2)` : 'auto',
+	'width': round ? `calc(${computedSize}rem * 2)` : 'auto',
+	'height': round ? `calc(${computedSize}rem * 2)` : 'auto',
 		}"
 		translate="no"
 	>
@@ -53,7 +78,7 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 				'far': !fill && !isFaBrand,
 			},
 		]"
-		:style="{ 'fontSize': `${size}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
+		:style="{ 'fontSize': `${computedSize}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
 		translate="no"
 	/>
 </template>

package/src/components/Modal.vue

@@ -93,6 +93,7 @@ onUnmounted(() => {
 					flat
 					icon="close"
 					thin
+					icon-mobile-size="1.4"
 					@click="closeModal"
 				/>
 				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
@@ -106,6 +107,7 @@ onUnmounted(() => {
 					thin
 					round
 					color="white"
+					icon-mobile-size="1.4"
 					@click="closeModal"
 				/>
 			</div>
@@ -134,6 +136,7 @@ onUnmounted(() => {
 	text-align: center;
 	font-weight: 600;
 	font-size: 20px;
+	margin-inline-end: 2rem;
 	margin-top: 0.5rem;
 	margin-bottom: 0 !important;
 	width: 100%;

package/src/components/Slider.vue

@@ -351,9 +351,17 @@ function buildSliderFrame(): void {
 
 		const originalCount = innerElements.value.length
 		const widthItem = selectorWidth.value / perPage.value
+
+		// Calculate how many times to repeat items to fill big screens
+		const minItemsNeeded = Math.max(perPage.value * 3, 20) // Ensure we have enough content for big screens
+		const repetitions = Math.max(1, Math.ceil(minItemsNeeded / originalCount))
+		const totalMainItems = originalCount * repetitions
+
+		// Ultra-aggressive buffer size for really big screens
+		const bufferSize = Math.max(perPage.value * 8, 20) // Even more buffer for huge screens
 		const itemsToBuild = config.value.loop
-			? originalCount + (2 * perPage.value)
-			: originalCount
+			? totalMainItems + (2 * bufferSize)
+			: totalMainItems
 
 		// Create a clean slate for the slider
 		carouselRef.value.innerHTML = ''
@@ -380,7 +388,7 @@ function buildSliderFrame(): void {
 
 		// Add clones before original items (for loop mode)
 		if (config.value.loop && innerElements.value.length > 0) {
-			for (let i = originalCount - perPage.value; i < originalCount; i++) {
+			for (let i = originalCount - bufferSize; i < originalCount; i++) {
 				if (i >= 0 && i < originalCount) {
 					const original = innerElements.value[i]
 					const clone = original.cloneNode(true) as Element
@@ -396,16 +404,24 @@ function buildSliderFrame(): void {
 			}
 		}
 
-		// Add main items (already clones of the slot content)
-		for (let i = 0; i < originalCount; i++) {
-			const element = innerElements.value[i]
-			const wrapped = buildSliderFrameItem(element.cloneNode(true) as Element)
-			docFragment.appendChild(wrapped)
+		// Add main items repeated multiple times to fill big screens
+		for (let rep = 0; rep < repetitions; rep++) {
+			for (let i = 0; i < originalCount; i++) {
+				const element = innerElements.value[i]
+				const clone = element.cloneNode(true) as Element
+
+				if (clone instanceof HTMLElement) {
+					clone.setAttribute('data-repetition', rep.toString())
+				}
+
+				const wrapped = buildSliderFrameItem(clone)
+				docFragment.appendChild(wrapped)
+			}
 		}
 
 		// Add clones after original items (for loop mode)
 		if (config.value.loop && innerElements.value.length > 0) {
-			for (let i = 0; i < perPage.value; i++) {
+			for (let i = 0; i < bufferSize; i++) {
 				if (i >= 0 && i < originalCount) {
 					const original = innerElements.value[i]
 					const clone = original.cloneNode(true) as Element
@@ -505,9 +521,17 @@ function buildSliderFrameItem(elm: Element): HTMLElement {
 	elementContainer.style.float = config.value.rtl ? 'right' : 'left'
 	elementContainer.style.padding = config.value.slideGap ? `${config.value.slideGap / 2}rem` : '0'
 
+	// Calculate total items including repetitions for big screens
+	const originalCount = innerElements.value.length
+	const minItemsNeeded = Math.max(perPage.value * 3, 20)
+	const repetitions = Math.max(1, Math.ceil(minItemsNeeded / originalCount))
+	const totalMainItems = originalCount * repetitions
+
+	// Ultra-aggressive buffer size - must match buildSliderFrame buffer size
+	const itemBufferSize = Math.max(perPage.value * 8, 20) // Even more buffer for huge screens
 	const percentage = config.value.loop
-		? 100 / (innerElements.value.length + (2 * perPage.value))
-		: 100 / innerElements.value.length
+		? 100 / (totalMainItems + (2 * itemBufferSize))
+		: 100 / totalMainItems
 
 	elementContainer.style.width = `${percentage}%`
 	elementContainer.appendChild(elm)
@@ -519,8 +543,10 @@ function slideToCurrent(enableTransitionFlag?: boolean): void {
 		// Ensure component is still mounted
 		if (!isMounted.value || !innerElements.value.length || !sliderFrame.value) return
 
+		// Ultra-aggressive buffer size - must match buildSliderFrame buffer size
+		const slideBufferSize = Math.max(perPage.value * 8, 20) // Even more buffer for huge screens
 		const currentSlideValue = config.value.loop
-			? currentSlide.value + perPage.value
+			? currentSlide.value + slideBufferSize
 			: currentSlide.value
 
 		const offset = (config.value.rtl ? 1 : -1) * currentSlideValue * (selectorWidth.value / perPage.value)
@@ -834,7 +860,7 @@ function touchmoveHandler(e: TouchEvent): void {
 				: currentOffset - dragOffset
 
 			sliderFrame.value.style[transformProperty.value as any]
-        = `translate3d(${(config.value.rtl ? 1 : -1) * offset}px, 0, 0)`
+				= `translate3d(${(config.value.rtl ? 1 : -1) * offset}px, 0, 0)`
 		}
 	}
 }
@@ -972,7 +998,7 @@ function mousemoveHandler(e: MouseEvent): void {
 				: currentOffset - dragOffset
 
 			sliderFrame.value.style[transformProperty.value as any]
-        = `translate3d(${(config.value.rtl ? 1 : -1) * offset}px, 0, 0)`
+				= `translate3d(${(config.value.rtl ? 1 : -1) * offset}px, 0, 0)`
 		}
 	}
 }
@@ -1373,16 +1399,11 @@ defineExpose({
 		<div ref="carouselRef" class="carousel-container">
 			<!-- We'll populate this with cloned content programmatically -->
 		</div>
-
 		<!-- Dots navigation (Vue-managed) -->
 		<div v-if="props.dots && totalDots > 1" class="carousel-dots">
 			<button
-				v-for="i in totalDots"
-				:key="i"
-				type="button"
-				class="carousel-dot" :class="[{ active: (i - 1) === currentSlide }]"
-				:aria-label="`Go to slide ${i}`"
-				@click="goTo(i - 1)"
+				v-for="i in totalDots" :key="i" type="button" class="carousel-dot"
+				:class="[{ active: (i - 1) === currentSlide }]" :aria-label="`Go to slide ${i}`" @click="goTo(i - 1)"
 			/>
 		</div>
 	</div>
@@ -1390,35 +1411,35 @@ defineExpose({
 
 <style scoped>
 .carousel-wrapper {
-  position: relative;
-  width: 100%;
+	position: relative;
+	width: 100%;
 }
 
 .carousel-container {
-  margin: 0 auto;
-  overflow: hidden;
+	margin: 0 auto;
+	overflow: hidden;
 }
 
 .carousel-dots {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  margin-top: 16px;
+	display: flex;
+	justify-content: center;
+	gap: 8px;
+	margin-top: 16px;
 }
 
 .carousel-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50px;
-  background-color: var(--bgl-gray-light);
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  transition: all 0.3s ease-in-out;
+	width: 12px;
+	height: 12px;
+	border-radius: 50px;
+	background-color: var(--bgl-gray-light);
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	transition: all 0.3s ease-in-out;
 }
 
 .carousel-dot.active {
-  background-color: var(--bgl-primary);
-  width: 26px;
+	background-color: var(--bgl-primary);
+	width: 26px;
 }
 </style>

package/src/components/dataTable/useTableData.ts

@@ -1,7 +1,8 @@
-import type { BglFormSchemaT } from '@bagelink/vue'
+import type { BglFormSchemaT, Field } from '@bagelink/vue'
+import type { DefaultPathsOptions } from 'type-fest/source/paths'
 import type { MaybeRefOrGetter } from 'vue'
 import type { SortDirectionsT } from '../../types/TableSchema'
-import { useBglSchema, isDate, keyToLabel } from '@bagelink/vue'
+import { useBglSchema, isDate, keyToLabel, formatDate } from '@bagelink/vue'
 import { computed, ref, watch, toValue } from 'vue'
 
 const NON_DIGIT_REGEX = /[^\d.-]/g
@@ -30,6 +31,13 @@ interface TransformedDataBase {
 
 type TransformedData<TransDataT> = TransDataT & TransformedDataBase
 
+function autoTransform<T>(field: Field<T, DefaultPathsOptions>): Field<T, DefaultPathsOptions> {
+	if ((field.id === 'created_at' || field.id === 'updated_at') && !field.transform) {
+		field.transform = (val?: any) => val ? formatDate(val) : val
+	}
+	return field
+}
+
 export function useTableData<T extends { [key: string]: any }>(options: UseTableDataOptions<T>) {
 	// Sorting state
 	const sortField = ref('')
@@ -55,7 +63,7 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 
 			// If we have a valid schema with fields, filter out fields without an ID
 			if (Array.isArray(schema) && schema.length > 0) {
-				resolvedSchema.value = schema.filter(field => field && field.id)
+				resolvedSchema.value = schema.filter(field => field && field.id).map(autoTransform)
 			} else if (Array.isArray(dataValue) && dataValue.length > 0) {
 				// If no schema is provided or it's empty, generate a default schema from the data
 				const firstItem = dataValue[0]

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

@@ -62,9 +62,13 @@ function useFormatting() {
 		if (parts.length === 3) {
 			const [day, month, year] = parts.map(p => Number.parseInt(p, 10))
 			if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
-				const date = new Date(year, month - 1, day)
-				if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) {
-					return date
+				const parsedDate = new Date(year, month - 1, day)
+				if (
+					parsedDate.getFullYear() === year
+					&& parsedDate.getMonth() === month - 1
+					&& parsedDate.getDate() === day
+				) {
+					return parsedDate
 				}
 			}
 		}
@@ -72,14 +76,27 @@ function useFormatting() {
 		return null
 	}
 
+	const normalizeDate = (date: Date): string => {
+		if (props.enableTime) {
+			// Keep the time when time is enabled
+			return date.toISOString()
+		} else {
+			// Normalize to midnight to emit exact date without time for server compatibility
+			const normalizedDate = new Date(date)
+			normalizedDate.setHours(0, 0, 0, 0)
+			return normalizedDate.toISOString().split('T')[0]
+		}
+	}
+
 	return {
 		formatDisplayDate,
-		parseUserInput
+		parseUserInput,
+		normalizeDate
 	}
 }
 
 // Initialize formatting
-const { formatDisplayDate, parseUserInput } = useFormatting()
+const { formatDisplayDate, parseUserInput, normalizeDate } = useFormatting()
 
 // Input handling composable
 function useInputHandling() {
@@ -91,7 +108,7 @@ function useInputHandling() {
 
 		const date = parseUserInput(input.value)
 		if (date) {
-			selectedDate.value = date.toISOString()
+			selectedDate.value = normalizeDate(date)
 		}
 	}
 
@@ -112,7 +129,7 @@ function useInputHandling() {
 		} else if (event.key === 'Enter' && inputValue.value) {
 			const date = parseUserInput(inputValue.value)
 			if (date) {
-				selectedDate.value = date.toISOString()
+				selectedDate.value = normalizeDate(date)
 				isOpen.value = false
 			}
 		}
@@ -153,43 +170,23 @@ onMounted(() => {
 			{{ label }}
 			<span v-if="required" class="required">*</span>
 		</label>
-		<Dropdown
-			:shown="isOpen"
-			placement="bottom-start"
-			:autoHide="false"
-			:triggers="['click']"
-		>
+		<Dropdown :shown="isOpen" placement="bottom-start" :autoHide="false" :triggers="['click']">
 			<template #trigger>
 				<div ref="datePickerRef" class="date-picker-container" @mousedown.stop @click.stop>
 					<TextInput
-						:modelValue="formatDisplayDate(selectedDate)"
-						iconStart="calendar"
-						:min="formatDisplayDate(min)"
-						:max="formatDisplayDate(max)"
-						:required="required"
-						:disabled="!editMode"
-						class="date-input m-0"
-						:class="{
+						:modelValue="formatDisplayDate(selectedDate)" iconStart="calendar"
+						:min="formatDisplayDate(min)" :max="formatDisplayDate(max)" :required="required"
+						:disabled="!editMode" class="date-input m-0" :class="{
 							'txt-center': center,
-						}"
-						:readonly="false"
-						@input="handleInput"
-						@focus="handleFocus"
-						@click="handleClick"
-						@keydown="handleKeydown"
+						}" :readonly="false" @input="handleInput" @focus="handleFocus" @click="handleClick" @keydown="handleKeydown"
 					/>
 				</div>
 			</template>
 
 			<div ref="calendarRef" @click.stop>
 				<DatePicker
-					v-model="selectedDate"
-					:min="min"
-					:max="max"
-					:mode="mode"
-					:firstDayOfWeek="firstDayOfWeek"
-					:locale="locale"
-					:enableTime="enableTime"
+					v-model="selectedDate" :min="min" :max="max" :mode="mode" :firstDayOfWeek="firstDayOfWeek"
+					:locale="locale" :enableTime="enableTime"
 				/>
 			</div>
 		</Dropdown>