@bagelink/vue 1.0.33 → 1.0.38

package/package.json

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

package/src/components/DataPreview.vue

@@ -9,7 +9,14 @@ import { useTableData } from './DataTable/useTableData'
 const props = defineProps<Omit<TableSchemaProps<T>, 'data'> & { modelValue: T, includeUnset?: boolean }>()
 const slots = useSlots() as Slots & Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>
 
-const data = computed(() => Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue])
+const data = computed(() => {
+	// Handle undefined or null modelValue
+	if (!props.modelValue) {
+		return []
+	}
+
+	return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+})
 
 const {
 	computedSchema,
@@ -21,7 +28,14 @@ const {
 	useServerSort: false
 })
 
-const firstItem = computed(() => computedData.value[0] || {} as T)
+const firstItem = computed(() => {
+	// Handle empty computedData
+	if (!computedData.value || computedData.value.length === 0) {
+		return {} as T
+	}
+
+	return computedData.value[0] || {} as T
+})
 
 const { renderField } = useSchemaField<T>({
 	mode: 'preview',
@@ -32,9 +46,14 @@ const { renderField } = useSchemaField<T>({
 
 <template>
 	<div class="data-preview">
-		<template v-for="field in computedSchema" :key="field.id">
-			<component :is="renderField(field, slots)" />
+		<template v-if="computedSchema && computedSchema.length > 0">
+			<template v-for="field in computedSchema" :key="field.id">
+				<component :is="renderField(field, slots)" />
+			</template>
 		</template>
+		<div v-else class="empty-preview">
+			No data to display
+		</div>
 	</div>
 </template>
 
@@ -61,4 +80,11 @@ const { renderField } = useSchemaField<T>({
 .field-value {
 	font-size: 0.95rem;
 }
+
+.empty-preview {
+	font-size: 0.9rem;
+	color: var(--bgl-black-tint);
+	padding: 1rem 0;
+	text-align: center;
+}
 </style>

package/src/components/DataTable/DataTable.vue

@@ -40,7 +40,8 @@ const {
 	computedData,
 	sortField,
 	sortDirection,
-	toggleSort
+	toggleSort,
+	cleanTransformedData
 } = useTableData<T>({ data, schema, columns, useServerSort, onSort: (field, direction) => {
 	emit('orderBy', `${field} ${direction}`.trim() as EmitOrderT)
 } })
@@ -55,6 +56,7 @@ const {
 } = useTableSelection<T>({
 	selectable: props.selectable,
 	selectedItems,
+	cleanData: cleanTransformedData,
 	onSelect: (item) => { emit('select', item) }
 })
 
@@ -142,10 +144,10 @@ watch(
 						@click="toggleSort(field?.id || '')"
 					>
 						<div class="flex">
-							{{ field.label || keyToLabel(field.id) }}
+							{{ field.label || keyToLabel(field?.id) }}
 							<div
 								class="list-arrows"
-								:class="{ sorted: sortField === field.id }"
+								:class="{ sorted: sortField === field?.id }"
 							>
 								<Icon
 									:class="{ desc: sortDirection === 'DESC' }"
@@ -158,9 +160,9 @@ watch(
 				<tbody>
 					<tr
 						v-for="{ data: row } in list"
-						:key="row.id"
+						:key="row?.id || `row-${Math.random()}`"
 						class="row row-item position-relative"
-						:class="{ selected: computedSelectedItems.includes(row.id ?? '') }"
+						:class="{ selected: row?.id && computedSelectedItems.includes(row.id) }"
 						@click="toggleSelectItem(row)"
 					>
 						<td v-if="isSelectable">
@@ -168,13 +170,13 @@ watch(
 								<input
 									v-model="selectedItems"
 									type="checkbox"
-									:value="row.id"
+									:value="row?.id || ''"
 								>
 							</div>
 						</td>
 						<td
 							v-for="field in computedSchema"
-							:key="`${field.id}-${row.id}`"
+							:key="`${field.id}-${row?.id || Math.random()}`"
 							class="col"
 						>
 							<slot

package/src/components/DataTable/useTableData.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef } from 'vue'
 import type { TableDataOptions, SortDirectionsT } from '../../types/TableSchema'
-import { useBglSchema, isDate } from '@bagelink/vue'
+import { useBglSchema, isDate, keyToLabel } from '@bagelink/vue'
 import { computed, ref } from 'vue'
 
 const NON_DIGIT_REGEX = /[^\d.-]/g
@@ -34,19 +34,63 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 	const sortField = ref('')
 	const sortDirection = ref<SortDirectionsT>('ASC')
 	// Helper function to get the value from a possibly computed ref
-	function getValue<V>(value: ComputedRef<V> | V): V {
-		return (value as ComputedRef<V>).value !== undefined
-			? (value as ComputedRef<V>).value
-			: value as V
+	function getValue<V>(value: ComputedRef<V> | V | undefined): V | undefined {
+		if (value === undefined || value === null) {
+			return undefined
+		}
+
+		try {
+			// Check if it's a computed ref with a value property
+			if (value && typeof value === 'object' && 'value' in value) {
+				return (value as ComputedRef<V>).value
+			}
+			// Otherwise return the value directly
+			return value as V
+		} catch (error) {
+			console.error('Error in getValue:', error)
+			return undefined
+		}
 	}
 
 	// Create a computed property for the schema that will react to changes in options.columns
 	const computedSchema = computed(() => {
-		return useBglSchema<T>({
+		// Get the data safely
+		const dataValue = options.data.value || []
+
+		// Get the schema from useBglSchema
+		const schema = useBglSchema<T>({
 			schema: getValue(options.schema),
 			columns: getValue(options.columns),
-			data: options.data.value,
+			data: dataValue,
 		})
+
+		// If we have a valid schema with fields, filter out fields without an ID
+		if (Array.isArray(schema) && schema.length > 0) {
+			return schema.filter(field => field && field.id)
+		}
+
+		// If no schema is provided or it's empty, generate a default schema from the data
+		if (Array.isArray(dataValue) && dataValue.length > 0) {
+			const firstItem = dataValue[0]
+
+			// Create a schema based on the keys of the first item
+			return Object.keys(firstItem || {})
+				.filter(key => key !== 'id' && !key.startsWith('_')) // Exclude id and internal fields
+				.map(key => ({
+					id: key,
+					label: keyToLabel(key),
+					$el: 'div',
+					transform: (val?: any) => {
+						// Handle date fields
+						const dateFields = ['created_at', 'updated_at']
+						if (dateFields.includes(key)) return val ? new Date(val).toLocaleString() : val
+						return val
+					}
+				}))
+		}
+
+		// Return an empty array if no data or schema
+		return []
 	})
 
 	function transform(rowData: T): TransformedData<T> {
@@ -82,10 +126,31 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 		return transformed
 	}
 
+	// Helper function to clean up transformed data by removing all added properties
+	function cleanTransformedData<T extends Record<string, any>>(data: TransformedData<T>): T {
+		const cleanData = { ...data } as T
+
+		// Remove all keys that start with underscore (these are added by the transform function)
+		Object.keys(cleanData).forEach((key) => {
+			if (key.startsWith('_')) {
+				delete cleanData[key]
+			}
+		})
+
+		return cleanData
+	}
+
 	const computedSortField = computed(() => sortField.value ? `_transformed_${sortField.value}` : '')
 
 	const computedData = computed(() => {
-		const currentData = options.data.value
+		// Get the data safely
+		const currentData = options.data.value || []
+
+		// If there's no data, return an empty array
+		if (!Array.isArray(currentData) || currentData.length === 0) {
+			return []
+		}
+
 		const useServerSortValue = getValue(options.useServerSort)
 
 		if (!sortField.value || useServerSortValue === true) {
@@ -139,6 +204,7 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 		transform,
 		sortField: computed(() => sortField.value),
 		sortDirection: computed(() => sortDirection.value),
-		toggleSort
+		toggleSort,
+		cleanTransformedData
 	}
 }

package/src/components/DataTable/useTableSelection.ts

@@ -1,7 +1,11 @@
 import type { TableSelectionOptions } from '../../types/TableSchema'
 import { computed, ref } from 'vue'
 
-export function useTableSelection<T extends Record<string, any>>(options: TableSelectionOptions<T>) {
+export interface UseTableSelectionOptions<T> extends TableSelectionOptions<T> {
+	cleanData?: (item: T) => T
+}
+
+export function useTableSelection<T extends Record<string, any>>(options: UseTableSelectionOptions<T>) {
 	const allSelectorEl = ref<HTMLInputElement>()
 	const computedSelectedItems = computed(() => options.selectedItems.value)
 	const isSelectable = computed(() => options.selectable === true && Array.isArray(options.selectedItems.value))
@@ -16,8 +20,18 @@ export function useTableSelection<T extends Record<string, any>>(options: TableS
 
 	function toggleSelectItem(item: T) {
 		if (computedSelectedItems.value.length === 0) {
-			const cleanItem = { ...item }
-			Object.keys(cleanItem).forEach(key => key.startsWith('_transformed_') && delete cleanItem[key])
+			// Clean the item if a cleanData function is provided, otherwise use the default cleaning
+			const cleanItem = options.cleanData ? options.cleanData(item) : { ...item }
+
+			// If no cleanData function is provided, use the default cleaning
+			if (!options.cleanData) {
+				Object.keys(cleanItem).forEach((key) => {
+					if (key.startsWith('_')) {
+						delete cleanItem[key]
+					}
+				})
+			}
+
 			options.onSelect(cleanItem)
 			return
 		}

package/src/components/DataTable/useTableVirtualization.ts

@@ -1,6 +1,6 @@
 import type { TableVirtualizationOptions } from '../../types/TableSchema'
 import { useVirtualList, useIntersectionObserver, until } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref, isRef } from 'vue'
 
 export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>) {
 	const lastItemEl = ref<HTMLTableRowElement | null>(null)
@@ -16,7 +16,16 @@ export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>
 		await until(() => lastItemEl.value).toBeTruthy()
 
 		useIntersectionObserver(lastItemEl, ([entry]) => {
-			if (entry.isIntersecting && options.data.value.length) {
+			// Check if options.data.value exists and has length
+			let dataLength = 0
+
+			if (isRef(options.data) && options.data.value) {
+				dataLength = Array.isArray(options.data.value) ? options.data.value.length : 0
+			} else if (Array.isArray(options.data)) {
+				dataLength = options.data.length
+			}
+
+			if (entry.isIntersecting && dataLength > 0) {
 				options.onLastItemVisible?.()
 			}
 		})

package/src/components/form/FieldArray.vue

@@ -5,6 +5,7 @@ import type {
 	Attributes,
 	BagelFieldOptions,
 	BglFormSchemaFnT,
+	BglFormSchemaT,
 	Field,
 } from '@bagelink/vue'
 import { BagelForm, Btn } from '@bagelink/vue'
@@ -39,6 +40,8 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
+const minimizedItems = $ref<boolean[]>([])
+
 const data = $ref<T[]>(props.modelValue || [])
 
 function emitValue() {
@@ -55,6 +58,10 @@ function addItem() {
 	emitValue()
 }
 
+function toggleMinimized(index: number) {
+	minimizedItems[index] = !minimizedItems[index]
+}
+
 const computedField = $computed(
 	() => ({
 		label: props.label,
@@ -72,6 +79,11 @@ const computedField = $computed(
 	}) as Field<T>
 ) as Field<Record<string, any>>
 
+const resolvedSchema = $computed<BglFormSchemaT<T>>(() => {
+	if (!props.schema) return [] as BglFormSchemaT<T>
+	return typeof props.schema === 'function' ? props.schema() : props.schema
+})
+
 const { renderField } = useSchemaField<Record<string, any>>({
 	mode: 'form',
 	getRowData: () => data,
@@ -90,11 +102,23 @@ const { renderField } = useSchemaField<Record<string, any>>({
 		<p class="label mb-05">
 			{{ label }}
 		</p>
-
-		<div v-if="schema" class="ps-025 border-start mb-05">
-			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden">
-				<BagelForm v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
-				<div class="bg-gray-80 -my-05 px-025 pt-065 txt-center">
+		<div v-if="resolvedSchema" class="ps-025 border-start mb-05">
+			<div
+				v-for="(_, i) in data" :key="i" outline thin
+				class="mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden"
+				:class="{ minimized: minimizedItems[i] }"
+			>
+				<p v-if="minimizedItems[i]" class="minimizedText txt14 p-025 opacity-7">
+					{{ label }} {{ i + 1 }}
+				</p>
+				<BagelForm v-else v-model="data[i]" :schema="resolvedSchema" @update:model-value="emitValue" />
+				<div class="bg-gray-80 -my-05 px-025 pt-065 pb-05 txt-center space-between flex column">
+					<Btn
+						v-if="resolvedSchema.length > 4"
+						class="block rotate-180 txt10 opacity-7 p-025"
+						flat thin icon="keyboard_arrow_down"
+						@click="toggleMinimized(i)"
+					/>
 					<Btn
 						v-if="props.delete"
 						icon="delete"
@@ -109,6 +133,7 @@ const { renderField } = useSchemaField<Record<string, any>>({
 				<p>{{ label }}</p>
 			</Btn>
 		</div>
+
 		<template v-else>
 			<component
 				:is="renderField({ ...computedField, id: String(i) })"
@@ -121,6 +146,19 @@ const { renderField } = useSchemaField<Record<string, any>>({
 </template>
 
 <style>
+.minimized{
+	height: 2.4rem;
+	overflow: hidden;
+}
+.minimizedText{
+	display: none;
+}
+.minimized .minimizedText{
+	display: block;
+}
+.minimized .rotate-180{
+	transform: rotate(0deg);
+}
 .itemBox{
 	background: var(--input-bg);
 	grid-template-columns: 1fr auto;
@@ -129,6 +167,7 @@ const { renderField } = useSchemaField<Record<string, any>>({
 	--input-height: 30px;
 	--input-font-size: 14px;
 }
+
 .pt-065{
 	padding-top: 0.65rem;
 }

package/src/components/layout/BottomMenu.vue

@@ -23,7 +23,7 @@ defineProps<{
 			@click="nav.onClick"
 		>
 			<Icon :icon="nav.icon" :size="1.4" class="m-0 line-height-14" />
-			<p class="m-0 pb-025 txt14 line-height-1 w60 menu-text">
+			<p class="m-0 pb-025 txt10 line-height-1 w60 menu-text">
 				{{ nav.label }}
 			</p>
 		</Btn>

package/src/styles/layout.css

@@ -2759,6 +2759,36 @@
     min-height: 200px;
 }
 
+.h-250,
+.h250p,
+.h-250p {
+    height: 250%;
+}
+
+.vh-250,
+.h-250vh,
+.h250vh {
+    height: 250vh;
+}
+
+.h-250px,
+.h250px {
+    height: 250px;
+}
+
+.hm-250px,
+.max-h-250px,
+.h-max-250px,
+.max-h250px {
+    max-height: 250px;
+}
+
+.min-h-250px,
+.h-min-250px,
+.min-h250px {
+    min-height: 250px;
+}
+
 .h-300,
 .h300p,
 .h-300p {
@@ -2789,6 +2819,36 @@
     min-height: 300px;
 }
 
+.h-350,
+.h350p,
+.h-350p {
+    height: 350%;
+}
+
+.vh-350,
+.h-350vh,
+.h350vh {
+    height: 350vh;
+}
+
+.h-350px,
+.h350px {
+    height: 350px;
+}
+
+.hm-350px,
+.max-h-350px,
+.h-max-350px,
+.max-h350px {
+    max-height: 350px;
+}
+
+.min-h-350px,
+.h-min-350px,
+.min-h350px {
+    min-height: 350px;
+}
+
 .h-400,
 .h400p,
 .h-400p {
@@ -2819,6 +2879,36 @@
     min-height: 400px;
 }
 
+.h-450,
+.h450p,
+.h-450p {
+    height: 450%;
+}
+
+.vh-450,
+.h-450vh,
+.h450vh {
+    height: 450vh;
+}
+
+.h-450px,
+.h450px {
+    height: 450px;
+}
+
+.hm-450px,
+.max-h-450px,
+.h-max-450px,
+.max-h450px {
+    max-height: 450px;
+}
+
+.min-h-450px,
+.h-min-450px,
+.min-h450px {
+    min-height: 450px;
+}
+
 .h-500,
 .h500p,
 .h-500p {
@@ -2849,6 +2939,36 @@
     min-height: 500px;
 }
 
+.h-550,
+.h550p,
+.h-550p {
+    height: 550%;
+}
+
+.vh-550,
+.h-550vh,
+.h550vh {
+    height: 550vh;
+}
+
+.h-550px,
+.h550px {
+    height: 550px;
+}
+
+.hm-550px,
+.max-h-550px,
+.h-max-550px,
+.max-h550px {
+    max-height: 550px;
+}
+
+.min-h-550px,
+.h-min-550px,
+.min-h550px {
+    min-height: 550px;
+}
+
 .h-600,
 .h600p,
 .h-600p {
@@ -2879,6 +2999,36 @@
     min-height: 600px;
 }
 
+.h-650,
+.h650p,
+.h-650p {
+    height: 650%;
+}
+
+.vh-650,
+.h-650vh,
+.h650vh {
+    height: 650vh;
+}
+
+.h-650px,
+.h650px {
+    height: 650px;
+}
+
+.hm-650px,
+.max-h-650px,
+.h-max-650px,
+.max-h650px {
+    max-height: 650px;
+}
+
+.min-h-650px,
+.h-min-650px,
+.min-h650px {
+    min-height: 650px;
+}
+
 .h-700,
 .h700p,
 .h-700p {
@@ -2909,6 +3059,36 @@
     min-height: 700px;
 }
 
+.h-750,
+.h750p,
+.h-750p {
+    height: 750%;
+}
+
+.vh-750,
+.h-750vh,
+.h750vh {
+    height: 750vh;
+}
+
+.h-750px,
+.h750px {
+    height: 750px;
+}
+
+.hm-750px,
+.max-h-750px,
+.h-max-750px,
+.max-h750px {
+    max-height: 750px;
+}
+
+.min-h-750px,
+.h-min-750px,
+.min-h750px {
+    min-height: 750px;
+}
+
 .h-800,
 .h800p,
 .h-800p {
@@ -2939,6 +3119,36 @@
     min-height: 800px;
 }
 
+.h-850,
+.h850p,
+.h-850p {
+    height: 850%;
+}
+
+.vh-850,
+.h-850vh,
+.h850vh {
+    height: 850vh;
+}
+
+.h-850px,
+.h850px {
+    height: 850px;
+}
+
+.hm-850px,
+.max-h-850px,
+.h-max-850px,
+.max-h850px {
+    max-height: 850px;
+}
+
+.min-h-850px,
+.h-min-850px,
+.min-h850px {
+    min-height: 850px;
+}
+
 .h-900,
 .h900p,
 .h-900p {
@@ -2969,6 +3179,36 @@
     min-height: 900px;
 }
 
+.h-950,
+.h950p,
+.h-950p {
+    height: 950%;
+}
+
+.vh-950,
+.h-950vh,
+.h950vh {
+    height: 950vh;
+}
+
+.h-950px,
+.h950px {
+    height: 950px;
+}
+
+.hm-950px,
+.max-h-950px,
+.h-max-950px,
+.max-h950px {
+    max-height: 950px;
+}
+
+.min-h-950px,
+.h-min-950px,
+.min-h950px {
+    min-height: 950px;
+}
+
 .h-1000,
 .h1000p,
 .h-1000p {