@bagelink/vue 1.8.9 → 1.8.14

package/src/components/Filter.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { Option } from '@bagelink/vue'
-import type { ComparisonOperator } from '../utils/queryFilter'
+import type { ComparisonOperator, LogicalOperator, QueryConditions } from './queryFilter'
 import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput } from '@bagelink/vue'
 import { computed } from 'vue'
 
 type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
 type Language = 'he' | 'en'
 
-// Define missing types locally
-type QueryObject<T = Record<string, any>> = Record<string, any> & T
-interface Condition {
-	pr?: boolean
-	[operator: string]: any
-}
-
-interface FilterCondition {
+interface UICondition {
 	id: string
 	field: string
 	operator: ComparisonOperator
 	value: string
-	connector: 'and' | 'or' | ''
+	connector: LogicalOperator | ''
 }
 
 const props = defineProps<{
@@ -33,10 +26,15 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-	change: [value: QueryObject<T>]
+	change: [value: QueryConditions<T>]
 }>()
 
-const model = defineModel<QueryObject<T>>({ default: () => ({}) })
+const model = defineModel<QueryConditions<T>>({ default: () => [] })
+
+let conditionIdCounter = 0
+function generateId() {
+	return `cond_${++conditionIdCounter}_${Date.now()}`
+}
 
 // Localization data
 const texts = {
@@ -113,45 +111,27 @@ const texts = {
 // Get current language texts
 const currentTexts = computed(() => texts[props.language || 'en'])
 
-// Derive conditions directly from model (read-only view)
-const conditions = computed(() => {
-	const obj = model.value
-	if (Object.keys(obj).filter(k => !k.startsWith('_')).length === 0) {
-		return [] as FilterCondition[]
-	}
-
-	const result: FilterCondition[] = []
-	const useOr = (obj as any)._or === true
-
-	for (const [field, value] of Object.entries(obj)) {
-		if (field.startsWith('_')) continue
+// Map model conditions to UI conditions with stable IDs
+const conditionIds = new Map<number, string>()
 
-		const condition: FilterCondition = {
-			id: field, // use field as id for stability
-			field,
-			operator: 'eq',
-			value: '',
-			connector: result.length > 0 ? (useOr ? 'or' : 'and') : '',
+const conditions = computed(() => {
+	const arr = model.value || []
+	return arr.map((cond, index) => {
+		// Get or create stable ID for this index
+		if (!conditionIds.has(index)) {
+			conditionIds.set(index, generateId())
 		}
-
-		if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
-			const cond = value as Condition
-			if (cond.pr === true) {
-				condition.operator = 'pr'
-			} else {
-				const op = Object.keys(cond)[0] as ComparisonOperator
-				condition.operator = op
-				const val = (cond as any)[op]
-				condition.value = val === null ? 'null' : String(val)
-			}
-		} else if (value !== undefined) {
-			condition.value = value === null ? 'null' : String(value)
+		const id = conditionIds.get(index)!
+
+		const uiCond: UICondition = {
+			id,
+			field: cond.field as string,
+			operator: cond.op,
+			value: cond.value === null ? 'null' : cond.value === undefined ? '' : String(cond.value),
+			connector: index > 0 ? (cond.connector || 'and') : '',
 		}
-
-		result.push(condition)
-	}
-
-	return result
+		return uiCond
+	})
 })
 
 const allOperatorOptions = computed(() => [
@@ -191,43 +171,60 @@ const booleanOptions = computed(() => [
 	{ label: currentTexts.value.boolean.false, value: 'false' },
 ])
 
-// Update a single field in model
-function updateCondition(field: string, operator: ComparisonOperator, value: string) {
-	const newModel = { ...model.value }
-
-	let parsedValue: any = value
-	if (value === 'true') parsedValue = true
-	else if (value === 'false') parsedValue = false
-	else if (value === 'null') parsedValue = null
-	else if (!Number.isNaN(Number(value)) && value.trim() !== '') parsedValue = Number(value)
-
-	if (operator === 'eq') {
-		(newModel as any)[field] = parsedValue
-	} else if (operator === 'pr') {
-		(newModel as any)[field] = { pr: true }
-	} else {
-		(newModel as any)[field] = { [operator]: parsedValue }
-	}
+function parseValue(value: string): string | number | boolean | null {
+	if (value === 'true') return true
+	if (value === 'false') return false
+	if (value === 'null') return null
+	if (!Number.isNaN(Number(value)) && value.trim() !== '') return Number(value)
+	return value
+}
+
+function updateConditionAtIndex(index: number, updates: Partial<{ field: string, op: ComparisonOperator, value: string, connector: LogicalOperator }>) {
+	const newModel = [...model.value]
+	const existing = newModel[index]
+	if (!existing) return
 
+	const updated = { ...existing }
+	if (updates.field !== undefined) updated.field = updates.field
+	if (updates.op !== undefined) updated.op = updates.op
+	if (updates.value !== undefined) updated.value = parseValue(updates.value)
+	if (updates.connector !== undefined) updated.connector = updates.connector
+
+	newModel[index] = updated
 	model.value = newModel
 	emit('change', newModel)
 }
 
 function addCondition() {
-	const field = props.fields[0]?.value || 'new_field'
-	updateCondition(field, 'eq', '')
+	const field = props.fields[0]?.value || 'field'
+	const newCondition = {
+		field,
+		op: 'eq' as ComparisonOperator,
+		value: '' as any,
+		connector: model.value.length > 0 ? 'and' as LogicalOperator : undefined,
+	}
+	const newModel = [...model.value, newCondition]
+	model.value = newModel
+	emit('change', newModel)
 }
 
-function removeCondition(field: string) {
-	const newModel = { ...model.value }
-	Reflect.deleteProperty(newModel, field)
+function removeCondition(index: number) {
+	const newModel = [...model.value]
+	newModel.splice(index, 1)
+	// Clear connector on new first item
+	if (newModel.length > 0 && newModel[0].connector) {
+		newModel[0] = { ...newModel[0], connector: undefined }
+	}
+	// Clean up ID mapping
+	conditionIds.delete(index)
 	model.value = newModel
 	emit('change', newModel)
 }
 
 function clearAll() {
-	model.value = {} as QueryObject<T>
-	emit('change', {} as QueryObject<T>)
+	conditionIds.clear()
+	model.value = []
+	emit('change', [])
 }
 
 function getFieldType(fieldValue: string): string {
@@ -242,35 +239,28 @@ const activeFiltersCount = computed(() => {
 	return conditions.value.filter(c => Boolean(c.field) && (c.operator === 'pr' || Boolean(c.value))).length
 })
 
-// Handle field change - need to rename the key in model
-function onFieldChange(oldField: string, newField: string, condition: FilterCondition) {
-	const newModel = { ...model.value }
-	Reflect.deleteProperty(newModel, oldField)
-
-	let parsedValue: any = condition.value
-	if (condition.value === 'true') parsedValue = true
-	else if (condition.value === 'false') parsedValue = false
-	else if (condition.value === 'null') parsedValue = null
-	else if (!Number.isNaN(Number(condition.value)) && condition.value.trim() !== '') parsedValue = Number(condition.value)
-
-	if (condition.operator === 'eq') {
-		(newModel as any)[newField] = parsedValue
-	} else if (condition.operator === 'pr') {
-		(newModel as any)[newField] = { pr: true }
-	} else {
-		(newModel as any)[newField] = { [condition.operator]: parsedValue }
-	}
+function getConditionIndex(id: string): number {
+	return conditions.value.findIndex(c => c.id === id)
+}
 
-	model.value = newModel
-	emit('change', newModel)
+function onFieldChange(id: string, newField: string) {
+	const index = getConditionIndex(id)
+	if (index >= 0) updateConditionAtIndex(index, { field: newField })
+}
+
+function onOperatorChange(id: string, operator: ComparisonOperator) {
+	const index = getConditionIndex(id)
+	if (index >= 0) updateConditionAtIndex(index, { op: operator })
 }
 
-function onOperatorChange(field: string, operator: ComparisonOperator, value: string) {
-	updateCondition(field, operator, value)
+function onValueChange(id: string, value: string) {
+	const index = getConditionIndex(id)
+	if (index >= 0) updateConditionAtIndex(index, { value })
 }
 
-function onValueChange(field: string, operator: ComparisonOperator, value: string) {
-	updateCondition(field, operator, value)
+function onConnectorChange(id: string, connector: LogicalOperator) {
+	const index = getConditionIndex(id)
+	if (index >= 0) updateConditionAtIndex(index, { connector })
 }
 </script>
 
@@ -293,21 +283,31 @@ function onValueChange(field: string, operator: ComparisonOperator, value: strin
 				<TransitionGroup name="condition">
 					<div
 						v-for="(condition, index) in conditions" :key="condition.id"
-						class="grid filter-row gap-025 align-items-center p-025"
+						class="grid filter-row gap-025 align-items-center pt-025"
+						:class="{
+							'mt-025': index > 0 && condition.connector === 'or',
+							'pt-075 border-top-or': index > 0 && condition.connector === 'or',
+						}"
 					>
-						<!-- Connector (AND/OR) - display only for now -->
-						<div v-if="index > 0" class="min-w-20px">
-							<span v-if="condition.connector === 'or'" class="txt12 opacity-6">{{
-								currentTexts.connectors.or }}</span>
-							<span v-else class="txt12 opacity-6">{{ currentTexts.connectors.and }}</span>
+						<!-- Connector (AND/OR) -->
+						<div v-if="index > 0" class="min-w-60px">
+							<SelectInput
+								:model-value="condition.connector || 'and'"
+								:options="[
+									{ label: currentTexts.connectors.and, value: 'and' },
+									{ label: currentTexts.connectors.or, value: 'or' },
+								]"
+								class="m-0 and-or-select txt-12"
+								@update:model-value="(v: LogicalOperator) => onConnectorChange(condition.id, v)"
+							/>
 						</div>
-						<div v-else class="min-w-20px" />
+						<div v-else class="" />
 
 						<!-- Field selector -->
 						<SelectInput
 							:model-value="condition.field" :options="fields"
 							:placeholder="currentTexts.placeholders.selectField" class="m-0 light-input borderHover"
-							@update:model-value="(v: string) => onFieldChange(condition.field, v, condition)"
+							@update:model-value="(v: string) => onFieldChange(condition.id, v)"
 						/>
 
 						<!-- Operator selector -->
@@ -315,7 +315,7 @@ function onValueChange(field: string, operator: ComparisonOperator, value: strin
 							:model-value="condition.operator"
 							:options="getOperatorsForType(getFieldType(condition.field), !!getFieldOptions(condition.field))"
 							class="m-0 light-input borderHover"
-							@update:model-value="(v: ComparisonOperator) => onOperatorChange(condition.field, v, condition.value)"
+							@update:model-value="(v: ComparisonOperator) => onOperatorChange(condition.id, v)"
 						/>
 
 						<!-- Value input - type-specific -->
@@ -325,31 +325,31 @@ function onValueChange(field: string, operator: ComparisonOperator, value: strin
 								:options="getFieldOptions(condition.field)!"
 								:placeholder="currentTexts.placeholders.selectOption"
 								class="m-0 light-input borderHover" searchable
-								@update:model-value="(v: string) => onValueChange(condition.field, condition.operator, v)"
+								@update:model-value="(v: string) => onValueChange(condition.id, v)"
 							/>
 							<SelectInput
 								v-else-if="getFieldType(condition.field) === 'boolean'"
 								:model-value="condition.value" :options="booleanOptions"
 								:placeholder="currentTexts.placeholders.selectOption"
 								class="m-0 light-input borderHover"
-								@update:model-value="(v: string) => onValueChange(condition.field, condition.operator, v)"
+								@update:model-value="(v: string) => onValueChange(condition.id, v)"
 							/>
 							<DateInput
 								v-else-if="getFieldType(condition.field) === 'date'"
 								:model-value="condition.value" :placeholder="currentTexts.placeholders.selectDate"
 								class="m-0 light-input borderHover"
-								@update:model-value="(v: any) => onValueChange(condition.field, condition.operator, String(v))"
+								@update:model-value="(v: any) => onValueChange(condition.id, String(v))"
 							/>
 							<TextInput
 								v-else-if="getFieldType(condition.field) === 'number'"
 								:model-value="condition.value" placeholder="0" type="number"
 								class="m-0 light-input borderHover"
-								@update:model-value="(v: string) => onValueChange(condition.field, condition.operator, v)"
+								@update:model-value="(v: string) => onValueChange(condition.id, v)"
 							/>
 							<TextInput
 								v-else :model-value="condition.value"
 								:placeholder="currentTexts.placeholders.enterValue" class="m-0 light-input borderHover"
-								@update:model-value="(v: string) => onValueChange(condition.field, condition.operator, v)"
+								@update:model-value="(v: string) => onValueChange(condition.id, v)"
 							/>
 						</template>
 						<div v-else />
@@ -357,7 +357,7 @@ function onValueChange(field: string, operator: ComparisonOperator, value: strin
 						<!-- Remove button -->
 						<Btn
 							icon="close" thin flat size="small" class="m_bg-gray-40 m_px-3 m_mx-auto"
-							@click="removeCondition(condition.field)"
+							@click="removeCondition(index)"
 						/>
 					</div>
 				</TransitionGroup>
@@ -375,8 +375,20 @@ function onValueChange(field: string, operator: ComparisonOperator, value: strin
 </template>
 
 <style scoped>
+.and-or-select {
+	--input-font-size: 12px !important;
+	--input-background-color: transparent !important;
+}
+.and-or-select .selectinput-btn {
+	border: none;
+	width: 100%;
+	box-shadow: none;
+	padding: 0.25rem !important;
+	font-size: 12px !important;
+}
+
 .filter-row {
-	grid-template-columns: auto minmax(90px, 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
+	grid-template-columns: 50px minmax(90px, 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
 }
 
 /* Transition animations */

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -124,27 +124,17 @@ function fileName(pathKey: string) {
 		>
 			<slot name="files" :files="pathKeys" :fileQueue>
 				<div v-if="multiple" class="bgl-multi-preview">
-					<!-- Show uploaded files only if showFileList is true (default) -->
-					<template v-if="showFileList !== false">
-						<div
-							v-for="path_key in pathKeys" :key="path_key"
-							v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
-							class="multi-image-item-preview" :class="{ 'bgl_fill-image': fill }"
-						>
-							<Image v-if="isImage(path_key)" :pathKey="path_key" class="multi-preview" />
-							<Icon v-else icon="description" class="multi-preview" />
-							<p class="m-0">
-								{{ fileName(path_key) }}
-							</p>
-							<Btn thin flat icon="delete" color="red" @click="removeFile(path_key)" />
-						</div>
-					</template>
-					<!-- File count indicator when showFileList is false and multiple files -->
-					<div v-if="showFileList === false && pathKeys.length > 0" class="flex column gap-05 pt-1">
-						<p class="color-primary">
-							{{ pathKeys.length }} file{{ pathKeys.length > 1 ? 's' : '' }} uploaded
+					<div
+						v-for="path_key in pathKeys" :key="path_key"
+						v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
+						class="multi-image-item-preview" :class="{ 'bgl_fill-image': fill }"
+					>
+						<Image v-if="isImage(path_key)" :pathKey="path_key" class="multi-preview" />
+						<Icon v-else icon="description" class="multi-preview" />
+						<p class="m-0">
+							{{ fileName(path_key) }}
 						</p>
-						<Btn color="primary" thin icon="autorenew" value="Replace files" @click="browse()" />
+						<Btn thin flat icon="delete" color="red" @click="removeFile(path_key)" />
 					</div>
 					<div
 						v-for="file in fileQueue" :key="file.name" class="multi-image-item-preview"

package/src/index.ts

@@ -1,3 +1,5 @@
+import './styles/bagel.css'
+
 export * from './components'
 export * from './components/form/useBagelFormState'
 export * from './composables'
@@ -14,7 +16,6 @@ export * from './types'
 export * from './utils'
 export * from './utils/allCountries'
 export * from './utils/BagelFormUtils'
-import './styles/bagel.css'
 
 export * from './utils/calendar/dateUtils'
 export * from './utils/constants'

package/src/types/BagelForm.ts

@@ -1,18 +1,19 @@
 // Local type definitions for internal use only
-type ArrayAttrs = any
-interface Option { label: string, value: any }
 import type { Paths, Get, IterableElement, OmitIndexSignature } from 'type-fest'
 import type { ToString } from 'type-fest/source/internal'
 import type { LiteralStringUnion } from 'type-fest/source/literal-union'
 import type { PathsOptions, DefaultPathsOptions } from 'type-fest/source/paths'
 import type { VNode } from 'vue'
 
-export type AttributeValue =
-	| string
-	| number
-	| boolean
-	| undefined
-	| { [key: string]: any }
+type ArrayAttrs = any
+interface Option { label: string, value: any }
+
+export type AttributeValue
+	= | string
+		| number
+		| boolean
+		| undefined
+		| { [key: string]: any }
 
 export type AttributeFn<T, P extends Path<T>> = (
 	field: SmartFieldVal<T, P>,
@@ -23,25 +24,25 @@ export interface Attributes<T, P extends Path<T>> {
 	[key: string]: AttributeValue | AttributeFn<T, P>
 }
 
-export type BagelFieldOptions<T, P extends Path<T>> =
-	| string
-	| (
-		| {
-			label?: string
-			value: string | number
-		}
-		| string
-		| number
+export type BagelFieldOptions<T, P extends Path<T>>
+	= | string
+		| (
+			| {
+				label?: string
+				value: string | number
+			}
+			| string
+			| number
+			| boolean
+			| { [key: string]: any }
+		)[]
+		| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
+		| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
+
+export type VIfType<T, P extends Path<T>>
+	= | string
 		| boolean
-		| { [key: string]: any }
-	)[]
-	| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
-	| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
-
-export type VIfType<T, P extends Path<T>> =
-	| string
-	| boolean
-	| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
+		| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
 
 export type ValidationFn<T, P extends Path<T>> = (
 	val?: SmartFieldVal<T, P>,
@@ -58,14 +59,14 @@ export type _Path<
 > = ToString<Paths<OmitIndexSignature<T>, PO>>
 
 // Utility type for open-ended object paths
-export type OpenEndedPath<T> =
-  keyof T extends infer K ?
-  	K extends keyof T ?
-  		T[K] extends { [key: string]: any } ?
-        `${K & string}.${string}`
-  			: never
-  		: never
-  	: never
+export type OpenEndedPath<T>
+	= keyof T extends infer K
+		? K extends keyof T
+			? T[K] extends { [key: string]: any }
+				? `${K & string}.${string}`
+				: never
+			: never
+		: never
 
 // Helper type to get paths for index signature properties
 type IndexSignaturePaths<T> = {
@@ -77,40 +78,40 @@ type IndexSignaturePaths<T> = {
 }[keyof T]
 
 // Enhanced Path type that allows flexibility for nested open-ended objects
-export type Path<T, PO extends PathsOptions = DefaultPathsOptions> =
-  FieldVal<T, _Path<T, PO>> extends Array<any>
-  	? LiteralStringUnion<_Path<T, PO>>
-  	: _Path<T, PO> | IndexSignaturePaths<T> | `${keyof T & string}.more_info.${string}`
+export type Path<T, PO extends PathsOptions = DefaultPathsOptions>
+	= FieldVal<T, _Path<T, PO>> extends Array<any>
+		? LiteralStringUnion<_Path<T, PO>>
+		: _Path<T, PO> | IndexSignaturePaths<T> | `${keyof T & string}.more_info.${string}`
 
 // Smart field value type that preserves type information when possible
-export type SmartFieldVal<T, P extends Path<T>> =
-	P extends string
+export type SmartFieldVal<T, P extends Path<T>>
+	= P extends string
 		? P extends keyof T
 			? T[P]
 			: any
 		: FieldVal<T, P>
 
 // Smart bagel field options that preserve type information
-export type SmartBagelFieldOptions<T, P extends Path<T>> =
-	| string
-	| (
-		| {
-			label?: string
-			value: string | number
-		}
-		| string
-		| number
-		| boolean
-		| { [key: string]: any }
-	)[]
-	| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
-	| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
+export type SmartBagelFieldOptions<T, P extends Path<T>>
+	= | string
+		| (
+			| {
+				label?: string
+				value: string | number
+			}
+			| string
+			| number
+			| boolean
+			| { [key: string]: any }
+		)[]
+		| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
+		| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
 
 // Smart VIf type that preserves type information
-export type SmartVIfType<T, P extends Path<T>> =
-	| string
-	| boolean
-	| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
+export type SmartVIfType<T, P extends Path<T>>
+	= | string
+		| boolean
+		| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
 
 // Smart validation function that preserves type information
 export type SmartValidationFn<T, P extends Path<T>> = (
@@ -138,8 +139,8 @@ export type SmartUpdateFn<T, P extends Path<T>> = (
 
 /** The value type at path P in object T. */
 // Fall back to unknown if type resolution fails
-export type FieldVal<T, P extends Path<T>> =
-	unknown extends Get<T, P> ? unknown : Get<T, P>
+export type FieldVal<T, P extends Path<T>>
+	= unknown extends Get<T, P> ? unknown : Get<T, P>
 
 /** If path P in T is an array, this gives the array's element type. */
 export type ArrayFieldVal<T, P extends Path<T>> = IterableElement<Get<T, P>>
@@ -297,5 +298,4 @@ export interface UploadInputProps {
 	dropPlaceholder?: string
 	noFilePlaceholder?: string
 	btnPlaceholder?: string
-	showFileList?: boolean
 }