@bagelink/vue 1.0.30 → 1.0.38

package/dist/types/BagelForm.d.ts

@@ -14,7 +14,7 @@ export type BagelFieldOptions<T = {
 }> = (string | ({
     label?: string;
     value: string | number;
-} | string | number | {
+} | string | number | boolean | {
     [key: string]: any;
 })[] | ((val: any, rowData?: T) => void));
 type GenericAssertFn<T> = (val: any, row: T) => boolean;

package/dist/types/BagelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -12,7 +12,7 @@ export type Tab = {
     icon?: IconType;
 } | string;
 export type ThemeType = 'light' | 'white' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'yellow' | 'primary' | 'blue';
-export type Option = string | number | {
+export type Option = string | number | boolean | {
     [key: string]: any;
 } | {
     label: string;

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,mBAAmB,EACnB,mBAAmB,IAAI,uBAAuB,EAC9C,YAAY,GACZ,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAEvE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;AAEvC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACxC,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,OAAO,GACP,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,GACT,MAAM,CAAA;AAET,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GACtB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE5C,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,mBAAmB,EACnB,mBAAmB,IAAI,uBAAuB,EAC9C,YAAY,GACZ,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAEvE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;AAEvC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACxC,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,OAAO,GACP,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,GACT,MAAM,CAAA;AAET,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN,OAAO,GACP;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GACtB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE5C,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.0.30",
+  "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

@@ -19,23 +19,16 @@ export type EmitOrderT = `${string} ${SortDirectionsT}`
 const props = defineProps<TableSchemaProps<T>>()
 
 const emit = defineEmits<{
-	'update:selectedItems': [string[]]
-	'orderBy': [EmitOrderT]
-	'select': [T]
-	'lastItemVisible': []
+	orderBy: [EmitOrderT]
+	select: [T]
+	lastItemVisible: []
 }>()
 
 const slots = useSlots() as Slots & Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>
 
 const loading = defineModel('loading', { default: false })
 const itemHeight = defineModel('itemHeight', { default: 50 })
-const selectedItems = defineModel<string[]>(
-	'selectedItems',
-	{
-		default: [] as string[],
-		set: (value: string[]) => value,
-	}
-)
+const selectedItems = defineModel<string[]>('selectedItems', { default: [] as string[] })
 
 const data = computed(() => props.data)
 const schema = computed(() => props.schema)
@@ -47,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)
 } })
@@ -62,6 +56,7 @@ const {
 } = useTableSelection<T>({
 	selectable: props.selectable,
 	selectedItems,
+	cleanData: cleanTransformedData,
 	onSelect: (item) => { emit('select', item) }
 })
 
@@ -149,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' }"
@@ -165,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">
@@ -175,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,7 +1,7 @@
 import type { ComputedRef } from 'vue'
 import type { TableDataOptions, SortDirectionsT } from '../../types/TableSchema'
-import { useBglSchema, isDate } from '@bagelink/vue'
-import { computed, ref, watch } from '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/form/inputs/RadioPillsInput.vue

@@ -22,12 +22,14 @@ const emits = defineEmits(['update:modelValue'])
 function getLabel(option: Option) {
 	if (typeof option === 'string') return option
 	if (typeof option === 'number') return `${option}`
+	if (typeof option === 'boolean') return option ? 'Yes' : 'No'
 	return option.label
 }
 
 function getValue(option: Option) {
 	if (typeof option === 'string') return option
 	if (typeof option === 'number') return option
+	if (typeof option === 'boolean') return option ? 'Yes' : 'No'
 	return option.value
 }
 

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

@@ -121,6 +121,7 @@ function getLabel(option: Option) {
 	if (!option) return ''
 	if (typeof option === 'string') return option
 	if (typeof option === 'number') return `${option}`
+	if (typeof option === 'boolean') return option ? 'Yes' : 'No'
 	return option.label
 }
 
@@ -128,6 +129,7 @@ function getValue(option?: Option) {
 	if (!option) return
 	if (typeof option === 'string') return option
 	if (typeof option === 'number') return option
+	if (typeof option === 'boolean') return option ? 'Yes' : 'No'
 	return option.value
 }
 

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>