@bagelink/vue 1.0.24 → 1.0.30

package/src/composables/index.ts

@@ -6,12 +6,12 @@ import { ref, watch } from 'vue'
 
 interface useBglSchemaParamsT<T> {
 	schema?: BglFormSchemaFnT<T>
-	showFields?: string[]
+	columns?: string[]
 	data?: any[]
 }
 
 export function useBglSchema<T = { [key: string]: unknown }>(
-	{ schema, showFields, data }: useBglSchemaParamsT<T> = {}
+	{ schema, columns, data }: useBglSchemaParamsT<T> = {}
 ): BglFormSchemaT<T> {
 	let _schema = schema
 	if (typeof _schema === 'function') {
@@ -19,12 +19,12 @@ export function useBglSchema<T = { [key: string]: unknown }>(
 	}
 	if (_schema) {
 		return (
-			showFields && showFields.length > 0
-				? _schema.filter(f => showFields.includes(f.id as string))
+			columns && columns.length > 0
+				? _schema.filter(f => columns.includes(f.id as string))
 				: _schema
 		) as BglFormSchemaT<T>
 	}
-	return getFallbackSchema(data, showFields)
+	return getFallbackSchema(data, columns)
 }
 
 export function localRef<T>(

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/types/TableSchema.ts

@@ -7,7 +7,7 @@ export type EmitOrderT = `${string} ${SortDirectionsT}`
 export interface TableSchemaProps<T extends Record<string, any> = Record<string, any>> {
 	data: T[]
 	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
-	showFields?: string[]
+	columns?: string[]
 	useServerSort?: boolean
 	selectable?: boolean
 	onLastItemVisible?: () => void
@@ -32,7 +32,7 @@ export interface TableVirtualizationOptions<T> {
 export interface TableDataOptions<T> {
 	data: Ref<T[]> | ComputedRef<T[]>
 	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
-	showFields?: string[]
+	columns?: string[]
 	sortField: string
 	sortDirection: SortDirectionsT
 	useServerSort?: boolean

package/src/utils/index.ts

@@ -91,7 +91,7 @@ export const isDate = (dateToTest: any) => !Number.isNaN(Date.parse(dateToTest))
 
 export function getFallbackSchema<T>(
 	data?: any[],
-	showFields?: string[]
+	columns?: string[]
 ): BglFormSchemaT<T> {
 	const keys = Array.from(new Set((data ?? []).flatMap(Object.keys)))
 
@@ -105,8 +105,8 @@ export function getFallbackSchema<T>(
 		},
 	})) as BglFormSchemaT<T>
 
-	return showFields
-		? schema.filter(f => showFields.includes(f.id as string) || !f.id)
+	return columns
+		? schema.filter(f => columns.includes(f.id as string) || !f.id)
 		: schema
 }
 

package/src/utils/timeAgo.ts

@@ -118,38 +118,100 @@ export function timeAgo(date: string | Date, lang: AvailableTimeLanguages = 'en'
 	return selectedLang.justNow as string
 }
 
-const formatMap = {
-	dd: { type: 'day', format: '2-digit' },
-	ddd: { type: 'weekday', format: 'short' },
-	dddd: { type: 'weekday', format: 'long' },
-	mm: { type: 'month', format: '2-digit' },
-	mmm: { type: 'month', format: 'short' },
-	mmmm: { type: 'month', format: 'long' },
-	yy: { type: 'year', format: '2-digit' },
-	yyyy: { type: 'year', format: 'numeric' },
-	HH: { type: 'hour', format: '2-digit' },
-	hh: { type: 'hour', format: '2-digit' },
-	MM: { type: 'minute', format: '2-digit' },
-	ss: { type: 'second', format: '2-digit' },
-	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'),
+			ddd: d.toLocaleString(locale, { weekday: 'short' }),
+			dddd: d.toLocaleString(locale, { weekday: 'long' }),
+			mm: String(d.getMonth() + 1).padStart(2, '0'),
+			mmm: d.toLocaleString(locale, { month: 'short' }),
+			mmmm: d.toLocaleString(locale, { month: 'long' }),
+			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 ''
 	}
 }