@bagelink/vue 1.0.24 → 1.0.26

package/package.json

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

package/src/components/Icon/Icon.vue

@@ -46,7 +46,7 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 }
 </style>
 
-<style scoped>
+<style>
 .bgl_icon-font {
 	font-family: 'Material Symbols Outlined', serif !important;
 }

package/src/components/Modal.vue

@@ -88,7 +88,7 @@ onUnmounted(() => {
 				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
 			</header>
 
-			<div v-else class="sticky bg-popup z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
+			<div v-else class="sticky z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
 				<Btn
 					class="position-start"
 					icon="close"

package/src/components/Spreadsheet/Index.vue

@@ -702,6 +702,7 @@ const columnOptions = computed(() => {
 							v-for="col in columnOptions"
 							:key="col.key"
 							v-model="visibleColumns"
+							@update:modelValue="val => undefined"
 							:value="col.key"
 							:label="col.label || col.key"
 						/>

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

@@ -1,22 +1,22 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends boolean | undefined | any[]">
 import { onMounted } from 'vue'
 
-const props = withDefaults(defineProps<{
+const { defaultValue = false, id } = defineProps<{
 	label?: string
 	id?: string
 	title?: string
 	small?: boolean
 	required?: boolean
-	defaultValue?: boolean
+	defaultValue?: T
 	value?: any
-}>(), { defaultValue: false })
+}>()
 
-const inputId = $computed(() => props.id || Math.random().toString(36).slice(7))
+const inputId = $computed(() => id || Math.random().toString(36).slice(7))
 
-const checked = defineModel<boolean | undefined | any[]>('modelValue', { default: undefined })
+const checked = defineModel<T>('modelValue', { default: undefined })
 
 onMounted(() => {
-	if (checked.value === undefined) checked.value = props.defaultValue
+	if (checked.value === undefined) checked.value = defaultValue as T
 })
 </script>
 

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Btn } from '@bagelink/vue'
 import { watch } from 'vue'
 
 const props = withDefaults(
@@ -26,13 +27,40 @@ watch(
 </script>
 
 <template>
-	<div class="bagel-input" :class="{ small }" :title="label">
+	<div class="bagel-input  " :class="{ small }" :title="label">
 		<label>
 			{{ label }}
-			<input
-				:id="id" v-model="inputVal" type="color" :placeholder="placeholder || label"
-				:class="{ 'no-edit': !editMode }" :required="required" v-bind="nativeInputAttrs"
-			>
+			<div class="flex bg-input rounded px-025 colorInputPickWrap">
+				<input
+					:id="id"
+					v-model="inputVal" class="border" type="color" :placeholder="placeholder || label"
+					:class="{ 'no-edit': !editMode, 'opacity-1': !inputVal }" :required="required" v-bind="nativeInputAttrs"
+				>
+				<input
+					v-model="inputVal"
+					class="flex-grow-4 border colorInputPick"
+					style="width: 50px"
+					type="text"
+					placeholder="Enter color"
+				>
+				<Btn :class="{ 'not-allowed opacity-3': !inputVal }" round flat thin icon="clear" @click="inputVal = ''" />
+			</div>
 		</label>
 	</div>
 </template>
+
+<style>
+.colorInputPick{
+    --input-font-size: 12px;
+	height: calc(var(--input-height) - 9px) !important;
+	background: transparent !important;
+}
+.colorInputPick:focus{
+	outline: none;
+	box-shadow: none !important;
+}
+.colorInputPickWrap:focus-within {
+	box-shadow: inset 0 0 10px #00000021;
+	outline-color: var(--input-bg);
+}
+</style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { modeType } from '../../Calendar/typings/types'
-import { Btn, NumberInput, Dropdown, TextInput } from '@bagelink/vue'
+import { Btn, NumberInput, Dropdown, TextInput, formatDate } from '@bagelink/vue'
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import Time, { WEEK_START_DAY } from '../../Calendar/helpers/Time'
 
@@ -20,6 +20,7 @@ const props = withDefaults(
 		max?: string | Date
 		timezone?: string
 		mode?: modeType
+		defaultValue?: string | Date
 		firstDayOfWeek?: WEEK_START_DAY
 		locale?: string
 		center?: boolean
@@ -49,28 +50,7 @@ const time = new Time(props.firstDayOfWeek, props.locale)
 function useFormatting() {
 	const formatDisplayDate = (date: Date | string | undefined): string => {
 		if (!date) return ''
-		const dateObj = typeof date === 'string' ? new Date(date) : date
-
-		const options: Intl.DateTimeFormatOptions = {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric',
-			...(props.enableTime && {
-				hour: '2-digit',
-				minute: '2-digit',
-			}),
-			timeZone: props.timezone
-		}
-
-		return dateObj.toLocaleString(props.locale || undefined, options)
-	}
-
-	const formatDate = (date: Date | string | undefined): string => {
-		if (!date) return ''
-		const dateObj = typeof date === 'string' ? new Date(date) : date
-		return props.enableTime
-			? dateObj.toISOString().slice(0, 16)
-			: dateObj.toISOString().split('T')[0]
+		return formatDate(date, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy')
 	}
 
 	const parseUserInput = (input: string): Date | null => {
@@ -97,7 +77,7 @@ function useFormatting() {
 
 	return {
 		formatDisplayDate,
-		formatDate,
+
 		parseUserInput
 	}
 }
@@ -131,14 +111,15 @@ function useDateValidation() {
 
 // Date state composable
 function useDateState() {
-	const { formatDisplayDate, formatDate } = useFormatting()
+	const { formatDisplayDate } = useFormatting()
 
 	const formattedDisplayValue = computed(() => formatDisplayDate(props.modelValue))
-	const formattedMin = computed(() => formatDate(props.min))
-	const formattedMax = computed(() => formatDate(props.max))
+	const formattedMin = computed(() => formatDate(props.min, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
+	const formattedMax = computed(() => formatDate(props.max, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
 	const selectedDate = computed(() => {
-		if (!props.modelValue) return null
-		return typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
+		const value = props.modelValue || props.defaultValue
+		if (!value) return null
+		return typeof value === 'string' ? new Date(value) : value
 	})
 
 	return {
@@ -381,11 +362,9 @@ const { hours, minutes, handleHourInput, handleMinuteInput, timezoneDisplay } =
 function selectDate(date: Date | null) {
 	if (!date || !props.editMode) return
 
-	// Create date in the target timezone
-	const tzOffset = new Date().getTimezoneOffset()
-	const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
-
 	if (props.enableTime) {
+		// Create date in the target timezone
+		const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
 		const currentHours = selectedDate.value?.getHours() ?? new Date().getHours()
 		const currentMinutes = selectedDate.value?.getMinutes() ?? new Date().getMinutes()
 		newDate.setHours(currentHours)
@@ -393,11 +372,13 @@ function selectDate(date: Date | null) {
 
 		// Adjust for timezone when time is enabled
 		if (props.timezone === 'UTC') {
+			const tzOffset = new Date().getTimezoneOffset()
 			newDate.setMinutes(newDate.getMinutes() + tzOffset)
 		}
 		emit('update:modelValue', newDate.toISOString())
 	} else {
 		// For date-only selection, ensure we're working with UTC midnight
+		// This ensures the date displayed matches the date selected regardless of timezone
 		const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
 		emit('update:modelValue', utcDate.toISOString().split('T')[0])
 		isOpen.value = false

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { modeType } from '../../Calendar/typings/types'
-import { Btn, NumberInput, Dropdown } from '@bagelink/vue'
+import { Btn, NumberInput, Dropdown, formatDate } from '@bagelink/vue'
 import Time, { WEEK_START_DAY } from '../../Calendar/helpers/Time'
 
 const props = withDefaults(
@@ -41,36 +41,19 @@ const time = new Time(props.firstDayOfWeek, props.locale)
 
 function formatDisplayDate(date: Date | string | undefined): string {
 	if (!date) return ''
-	const dateObj = typeof date === 'string' ? new Date(date) : date
-
-	if (props.enableTime) {
-		return dateObj.toLocaleString(props.locale || undefined, {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric',
-			hour: '2-digit',
-			minute: '2-digit',
-			timeZone: props.timezone
-		})
-	}
-
-	return dateObj.toLocaleString(props.locale || undefined, {
-		year: 'numeric',
-		month: 'short',
-		day: 'numeric',
-		timeZone: props.timezone
-	})
+	console.log('date', date)
+	return formatDate(date, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy', props.locale)
 }
 
-function formatDate(date: Date | string | undefined): string {
-	if (!date) return ''
-	const dateObj = typeof date === 'string' ? new Date(date) : date
-	return props.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split('T')[0]
-}
+// function formatDate(date: Date | string | undefined): string {
+// 	if (!date) return ''
+// 	const dateObj = typeof date === 'string' ? new Date(date) : date
+// 	return props.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split('T')[0]
+// }
 
 const formattedDisplayValue = $computed(() => formatDisplayDate(props.modelValue))
-const formattedMin = $computed(() => formatDate(props.min))
-const formattedMax = $computed(() => formatDate(props.max))
+const formattedMin = $computed(() => formatDate(props.min, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
+const formattedMax = $computed(() => formatDate(props.max, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
 
 const selectedDate = $computed(() => {
 	if (!props.modelValue) return null

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

@@ -14,7 +14,7 @@ interface NumberInputProps {
 	iconStart?: IconType
 	icon?: IconType
 	label?: string
-	defaultValue?: number
+	defaultValue?: number | string
 	placeholder?: string
 	disabled?: boolean
 	required?: boolean

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

@@ -37,8 +37,7 @@ const props = withDefaults(
 const password = defineModel<string>('modelValue')
 const showPwd = defineModel<boolean>('showPwd', { default: false })
 
-const toggleShowPwdIcon = $computed(() => showPwd.value ? 'visibility_off' : 'visibility'
-)
+const toggleShowPwdIcon = $computed(() => showPwd.value ? 'visibility_off' : 'visibility')
 const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
 </script>
 

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

@@ -396,7 +396,7 @@ onMounted(initializeCountry)
 								v-for="(pb, index) in sortedCountries"
 								:key="pb.iso2 + isPreferred(pb)"
 								role="option"
-								class="flex gap-075"
+								class="flex gap-075 pointer hover"
 								tabindex="-1"
 								:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)
 								"
@@ -425,7 +425,6 @@ onMounted(initializeCountry)
 					:disabled="disabled"
 					type="tel"
 					:autocomplete="autocomplete"
-					class="vti__input"
 					:pattern="computedInputOptions.pattern"
 					:minlength="computedInputOptions.minlength"
 					:maxlength="computedInputOptions.maxlength"

package/src/components/layout/TabsNav.vue

@@ -31,14 +31,15 @@ const tabsWrap = ref<HTMLElement | undefined>(undefined)
 const tabs = ref<HTMLElement[]>([])
 
 function updateIndicator() {
-	const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
-	if (activeTab && tabsWrap.value) {
-		const { offsetLeft, offsetWidth } = activeTab
-		tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
-		if (tabsWrap.value) {
+	nextTick(() => {
+		if (!tabsWrap.value) return
+		const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
+		if (activeTab) {
+			const { offsetLeft, offsetWidth } = activeTab
+			tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
 			tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
 		}
-	}
+	})
 }
 
 function selectTab(tab: TabType | string) {
@@ -71,6 +72,14 @@ onMounted(() => {
 	updateIndicator()
 	window.addEventListener('resize', updateIndicator)
 })
+
+watch(
+	() => tabs.value,
+	() => {
+		nextTick(() => { updateIndicator() })
+	},
+	{ deep: true }
+)
 onBeforeUnmount(() => {
 	window.removeEventListener('resize', updateIndicator)
 })

package/src/styles/inputs.css

@@ -295,6 +295,7 @@ select {
     padding: 0.025rem 0.05rem;
     display: block;
     width: var(--input-height);
+    min-width: var(--input-height);
     height: var(--input-height);
     border: none;
     -webkit-appearance: none;

package/src/styles/layout.css

@@ -3083,6 +3083,46 @@
     gap: 10rem;
 }
 
+.gap-11 {
+    gap: 11rem;
+}
+
+.gap-12 {
+    gap: 12rem;
+}
+
+.gap-13 {
+    gap: 13rem;
+}
+
+.gap-14 {
+    gap: 14rem;
+}
+
+.gap-15 {
+    gap: 15rem;
+}
+
+.gap-16 {
+    gap: 16rem;
+}
+
+.gap-17 {
+    gap: 17rem;
+}
+
+.gap-18 {
+    gap: 18rem;
+}
+
+.gap-19 {
+    gap: 19rem;
+}
+
+.gap-20 {
+    gap: 20rem;
+}
+
 .gap-1-5 {
     gap: 1.5rem;
 }
@@ -3405,6 +3445,11 @@
     flex-grow: 4;
 }
 
+.flex-grow-9999 {
+    flex-grow: 9999;
+}
+
+
 .flex-shrink-4 {
     flex-shrink: 4;
 }

package/src/styles/mobilLayout.css

@@ -2368,6 +2368,47 @@
         gap: 10rem;
     }
 
+    .m_gap-11 {
+        gap: 11rem;
+    }
+
+    .m_gap-12 {
+        gap: 12rem;
+    }
+
+    .m_gap-13 {
+        gap: 13rem;
+    }
+
+    .m_gap-14 {
+        gap: 14rem;
+    }
+
+    .m_gap-15 {
+        gap: 15rem;
+    }
+
+    .m_gap-16 {
+        gap: 16rem;
+    }
+
+    .m_gap-17 {
+        gap: 17rem;
+    }
+
+    .m_gap-18 {
+        gap: 18rem;
+    }
+
+    .m_gap-19 {
+        gap: 19rem;
+    }
+
+    .m_gap-20 {
+        gap: 20rem;
+    }
+
+
     .m_gap-1-5 {
         gap: 1.5rem;
     }
@@ -2690,6 +2731,10 @@
         flex-grow: 4;
     }
 
+    .m_flex-grow-9999 {
+        flex-grow: 9999;
+    }
+
     .m_flex-shrink-4 {
         flex-shrink: 4;
     }

package/src/styles/theme.css

@@ -302,6 +302,19 @@
     overflow: hidden;
 }
 
+.extraOptions {
+    max-height: 30px;
+    overflow: hidden;
+    transition: all 0.2s 30s ease;
+}
+
+
+.extraOptions:hover {
+    max-height: 200vh;
+    transition: 0.2s all 0.2s ease;
+
+}
+
 @media screen and (max-width: 1000px) {
     .entity-container {
         grid-template-columns: minmax(22vw, 1fr) 2fr;

package/src/utils/timeAgo.ts

@@ -134,22 +134,96 @@ const formatMap = {
 	ampm: { type: 'dayPeriod', format: 'short' }
 } as const
 
-export function formatDate(date?: string | Date, format: string = 'dd.mm.yy') {
+function getBrowserNavigatorLocale(): string {
+	if (typeof navigator !== 'object') return 'en-US'
+	return navigator.languages && navigator.languages.length
+		? navigator.languages[0]
+		: navigator.language
+}
+
+export function formatDate(date?: string | Date, format: string = 'dd.mm.yy', locale?: string) {
 	if (!date) return ''
+	locale = locale || getBrowserNavigatorLocale()
 	try {
-		const formatParts = format.split(/[.\s:]/)
-		const formatObject: Record<string, string> = {}
+		// Validate the date
+		const d = typeof date === 'string' ? new Date(date) : date
 
-		for (const part of formatParts) {
-			const formatInfo = formatMap[part as keyof typeof formatMap]
-			if (!formatInfo) continue
-			formatObject[formatInfo.type] = formatInfo.format
+		// Check if date is valid
+		if (Number.isNaN(d.getTime())) {
+			console.warn('Invalid date provided to formatDate:', date)
+			return ''
 		}
 
-		const d = typeof date === 'string' ? new Date(date) : date
+		// Extract the separator from the format string
+		const separator = format.match(/[^\w\s]/)?.[0] || '.'
+
+		// Split by any non-alphanumeric character (except spaces)
+		const formatParts = format.split(/[^\w\s]/)
+
+		// Create a map of all date parts
+		const datePartsMap: Record<string, string> = {
+			dd: String(d.getDate()).padStart(2, '0'),
+			mm: String(d.getMonth() + 1).padStart(2, '0'),
+			yy: String(d.getFullYear()).slice(-2),
+			yyyy: String(d.getFullYear()),
+			HH: String(d.getHours()).padStart(2, '0'),
+			MM: String(d.getMinutes()).padStart(2, '0'),
+			ss: String(d.getSeconds()).padStart(2, '0')
+		}
+
+		// For more complex formats that need localization, use Intl.DateTimeFormat
+		const formatter = new Intl.DateTimeFormat(locale, {
+			weekday: 'long',
+			month: 'long',
+			day: 'numeric',
+			year: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit',
+			second: '2-digit',
+			hour12: true
+		})
+
+		const formattedParts = formatter.formatToParts(d)
+		const partsMap: Record<string, string> = {}
+
+		formattedParts.forEach((part) => {
+			if (part.type !== 'literal') {
+				partsMap[part.type] = part.value
+			}
+		})
+
+		// Add localized formats to our map
+		if (partsMap.month) {
+			datePartsMap.mmm = partsMap.month.substring(0, 3)
+			datePartsMap.mmmm = partsMap.month
+		}
+
+		if (partsMap.weekday) {
+			datePartsMap.ddd = partsMap.weekday.substring(0, 3)
+			datePartsMap.dddd = partsMap.weekday
+		}
+
+		if (partsMap.dayPeriod) {
+			datePartsMap.ampm = partsMap.dayPeriod
+		}
+
+		// Build the formatted date string following the exact format pattern
+		let formattedDate = ''
+		for (let i = 0; i < formatParts.length; i++) {
+			const part = formatParts[i]
+			if (datePartsMap[part]) {
+				formattedDate += datePartsMap[part]
+			}
+
+			// Add separator between parts (except after the last part)
+			if (i < formatParts.length - 1) {
+				formattedDate += separator
+			}
+		}
 
-		return d.toLocaleDateString('he-IL', formatObject)
+		return formattedDate
 	} catch (error) {
+		console.warn('Error formatting date', error)
 		return ''
 	}
 }