@bagelink/vue 1.7.88 → 1.7.92

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.7.88",
+  "version": "1.7.92",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Filter.vue

@@ -1,9 +1,25 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import type { ComparisonOperator, QueryConditions, FilterCondition, LogicalOperator } from '../utils/queryFilter'
-import { Btn, DateInput, Dropdown, SelectInput, TextInput, type Option } from '@bagelink/vue'
+import type { ComparisonOperator } from '../utils/queryFilter'
+import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput, type Option } 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 {
+	id: string
+	field: string
+	operator: ComparisonOperator
+	value: string
+	connector: 'and' | 'or' | ''
+}
 
 const props = defineProps<{
 	fields: Array<{
@@ -12,44 +28,156 @@ const props = defineProps<{
 		type?: 'string' | 'number' | 'boolean' | 'date'
 		options?: OptionsSource
 	}>
+	language?: Language
 }>()
 
 const emit = defineEmits<{
-	change: [value: QueryConditions<T>]
+	change: [value: QueryObject<T>]
 }>()
 
-const model = defineModel<QueryConditions<T>>({ default: () => [] })
-
-const allOperatorOptions: { label: string, value: ComparisonOperator }[] = [
-	{ label: 'שווה ל', value: 'eq' },
-	{ label: 'לא שווה ל', value: 'ne' },
-	{ label: 'גדול מ', value: 'gt' },
-	{ label: 'גדול או שווה ל', value: 'ge' },
-	{ label: 'קטן מ', value: 'lt' },
-	{ label: 'קטן או שווה ל', value: 'le' },
-	{ label: 'מכיל', value: 'co' },
-	{ label: 'מתחיל ב', value: 'sw' },
-	{ label: 'מסתיים ב', value: 'ew' },
-	{ label: 'קיים', value: 'pr' },
-]
-
-const connectorOptions: { label: string, value: LogicalOperator }[] = [
-	{ label: 'וגם', value: 'and' },
-	{ label: 'או', value: 'or' },
-]
+const model = defineModel<QueryObject<T>>({ default: () => ({}) })
+
+// Localization data
+const texts = {
+	he: {
+		filter: 'פילטר',
+		noActiveFilters: 'אין פילטרים פעילים',
+		connectors: {
+			and: 'וגם',
+			or: 'או'
+		},
+		operators: {
+			eq: 'שווה ל',
+			ne: 'לא שווה ל',
+			gt: 'גדול מ',
+			ge: 'גדול או שווה ל',
+			lt: 'קטן מ',
+			le: 'קטן או שווה ל',
+			co: 'מכיל',
+			sw: 'מתחיל ב',
+			ew: 'מסתיים ב',
+			pr: 'קיים'
+		},
+		placeholders: {
+			selectField: 'בחר שדה',
+			selectOption: 'בחירה',
+			selectDate: 'בחירת תאריך',
+			enterValue: 'ערך'
+		},
+		buttons: {
+			addCondition: 'הוספת תנאי',
+			clearAll: 'נקה הכל'
+		},
+		boolean: {
+			true: 'כן',
+			false: 'לא'
+		}
+	},
+	en: {
+		filter: 'Filter',
+		noActiveFilters: 'No active filters',
+		connectors: {
+			and: 'And',
+			or: 'Or'
+		},
+		operators: {
+			eq: 'Equals',
+			ne: 'Not equals',
+			gt: 'Greater than',
+			ge: 'Greater or equal',
+			lt: 'Less than',
+			le: 'Less or equal',
+			co: 'Contains',
+			sw: 'Starts with',
+			ew: 'Ends with',
+			pr: 'Present'
+		},
+		placeholders: {
+			selectField: 'Select field',
+			selectOption: 'Select option',
+			selectDate: 'Select date',
+			enterValue: 'Value'
+		},
+		buttons: {
+			addCondition: 'Add condition',
+			clearAll: 'Clear all'
+		},
+		boolean: {
+			true: 'Yes',
+			false: 'No'
+		}
+	}
+}
+
+// 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
+
+		const condition: FilterCondition = {
+			id: field, // use field as id for stability
+			field,
+			operator: 'eq',
+			value: '',
+			connector: result.length > 0 ? (useOr ? 'or' : 'and') : '',
+		}
+
+		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)
+		}
+
+		result.push(condition)
+	}
+
+	return result
+})
+
+const allOperatorOptions = computed(() => [
+	{ label: currentTexts.value.operators.eq, value: 'eq' as ComparisonOperator },
+	{ label: currentTexts.value.operators.ne, value: 'ne' as ComparisonOperator },
+	{ label: currentTexts.value.operators.gt, value: 'gt' as ComparisonOperator },
+	{ label: currentTexts.value.operators.ge, value: 'ge' as ComparisonOperator },
+	{ label: currentTexts.value.operators.lt, value: 'lt' as ComparisonOperator },
+	{ label: currentTexts.value.operators.le, value: 'le' as ComparisonOperator },
+	{ label: currentTexts.value.operators.co, value: 'co' as ComparisonOperator },
+	{ label: currentTexts.value.operators.sw, value: 'sw' as ComparisonOperator },
+	{ label: currentTexts.value.operators.ew, value: 'ew' as ComparisonOperator },
+	{ label: currentTexts.value.operators.pr, value: 'pr' as ComparisonOperator },
+])
 
 function getOperatorsForType(fieldType: string, hasOptions: boolean) {
 	if (hasOptions) {
-		return allOperatorOptions.filter(o => ['eq', 'ne', 'pr'].includes(o.value))
+		return allOperatorOptions.value.filter(o => ['eq', 'ne', 'pr'].includes(o.value))
 	}
 	switch (fieldType) {
 		case 'boolean':
-			return allOperatorOptions.filter(o => ['eq', 'ne', 'pr'].includes(o.value))
+			return allOperatorOptions.value.filter(o => ['eq', 'ne', 'pr'].includes(o.value))
 		case 'number':
 		case 'date':
-			return allOperatorOptions.filter(o => ['eq', 'ne', 'gt', 'ge', 'lt', 'le', 'pr'].includes(o.value))
+			return allOperatorOptions.value.filter(o => ['eq', 'ne', 'gt', 'ge', 'lt', 'le', 'pr'].includes(o.value))
 		default:
-			return allOperatorOptions.filter(o => ['eq', 'ne', 'co', 'sw', 'ew', 'pr'].includes(o.value))
+			return allOperatorOptions.value.filter(o => ['eq', 'ne', 'co', 'sw', 'ew', 'pr'].includes(o.value))
 	}
 }
 
@@ -57,191 +185,205 @@ function getFieldOptions(fieldValue: string): OptionsSource | undefined {
 	return props.fields.find(f => f.value === fieldValue)?.options
 }
 
-const booleanOptions = [
-	{ label: 'כן', value: 'true' },
-	{ label: 'לא', value: 'false' },
-]
-
-function parseValue(value: any): any {
-	const str = String(value ?? '')
-	if (str === 'true') return true
-	if (str === 'false') return false
-	if (str === 'null') return null
-	if (str !== '' && !Number.isNaN(Number(str))) return Number(str)
-	return value
-}
-
-function updateCondition(index: number, updates: Partial<FilterCondition<T>>) {
-	const newConditions = [...model.value]
-	newConditions[index] = { ...newConditions[index], ...updates }
-
-	// Parse value if provided
-	if ('value' in updates) {
-		newConditions[index].value = parseValue(updates.value)
+const booleanOptions = computed(() => [
+	{ label: currentTexts.value.boolean.true, value: 'true' },
+	{ 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 }
 	}
 
-	model.value = newConditions
-	emit('change', newConditions)
+	model.value = newModel
+	emit('change', newModel)
 }
 
 function addCondition() {
-	const field = props.fields[0]?.value || ''
-	const newCondition: FilterCondition<T> = {
-		field,
-		op: 'eq',
-		value: '',
-		connector: model.value.length > 0 ? 'and' : undefined,
-	}
-	const newConditions = [...model.value, newCondition]
-	model.value = newConditions
-	emit('change', newConditions)
+	const field = props.fields[0]?.value || 'new_field'
+	updateCondition(field, 'eq', '')
 }
 
-function removeCondition(index: number) {
-	const newConditions = model.value.filter((_, i) => i !== index)
-	// Clear connector on first item
-	if (newConditions.length > 0 && newConditions[0].connector) {
-		newConditions[0] = { ...newConditions[0], connector: undefined }
-	}
-	model.value = newConditions
-	emit('change', newConditions)
+function removeCondition(field: string) {
+	const newModel = { ...model.value }
+	Reflect.deleteProperty(newModel, field)
+	model.value = newModel
+	emit('change', newModel)
 }
 
 function clearAll() {
-	model.value = []
-	emit('change', [])
+	model.value = {} as QueryObject<T>
+	emit('change', {} as QueryObject<T>)
 }
 
 function getFieldType(fieldValue: string): string {
 	return props.fields.find(f => f.value === fieldValue)?.type || 'string'
 }
 
-function needsValue(op: ComparisonOperator): boolean {
-	return op !== 'pr'
-}
-
-function displayValue(value: any): string {
-	if (value === null) return 'null'
-	if (value === true) return 'true'
-	if (value === false) return 'false'
-	return String(value ?? '')
+function needsValue(operator: ComparisonOperator): boolean {
+	return operator !== 'pr'
 }
 
 const activeFiltersCount = computed(() => {
-	return model.value.filter(c => c.field !== '' && (c.op === 'pr' || (c.value !== undefined && c.value !== ''))).length
+	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 }
+	}
+
+	model.value = newModel
+	emit('change', newModel)
+}
+
+function onOperatorChange(field: string, operator: ComparisonOperator, value: string) {
+	updateCondition(field, operator, value)
+}
+
+function onValueChange(field: string, operator: ComparisonOperator, value: string) {
+	updateCondition(field, operator, value)
+}
 </script>
 
 <template>
 	<Dropdown
-		flat placement="bottom-start" icon="filter_alt"
-		:value="activeFiltersCount > 0 ? `פילטר (${activeFiltersCount})` : 'פילטר'" thin :auto-hide="false"
+		flat
+		placement="bottom-end"
+		icon="filter_alt"
+		:value="activeFiltersCount > 0 ? `${currentTexts.filter} (${activeFiltersCount})` : currentTexts.filter"
+		thin
+		:auto-hide="false"
 	>
-		<div class="filter-builder">
-			<TransitionGroup name="condition">
-				<div
-					v-for="(condition, index) in model" :key="index" class="flex gap-05 bg-gray-20 rounded p-025"
-					:class="condition.connector === 'or' ? 'mt-05' : ''"
-				>
-					<!-- Connector (AND/OR) -->
-					<SelectInput
-						v-if="index > 0" :model-value="condition.connector" :options="connectorOptions"
-						style="width: 75px"
-						@update:model-value="(v: LogicalOperator) => updateCondition(index, { connector: v })"
-					/>
-					<div v-else-if="model.length > 1" style="width: 100px" />
-
-					<!-- Field selector -->
-					<SelectInput
-						:model-value="condition.field" :options="fields" placeholder="בחר שדה" class="field-select"
-						@update:model-value="(v: string) => updateCondition(index, { field: v })"
-					/>
-
-					<!-- Operator selector -->
-					<SelectInput
-						:model-value="condition.op"
-						:options="getOperatorsForType(getFieldType(condition.field as string), !!getFieldOptions(condition.field as string))"
-						class="operator-select"
-						@update:model-value="(v: ComparisonOperator) => updateCondition(index, { op: v })"
-					/>
-
-					<!-- Value input - type-specific -->
-					<template v-if="needsValue(condition.op)">
+		<div class="p-1 m_p-05">
+			<div class="p-025 bg-bg radius-1 mb-05">
+				<!-- Empty state -->
+				<div v-if="conditions.length === 0" class="opacity-3 flex gap-05 p-025 min-w-450px m_min-0">
+					<Icon name="info" />
+					<div class="">
+						{{ currentTexts.noActiveFilters }}
+					</div>
+				</div>
+
+				<TransitionGroup name="condition">
+					<div
+						v-for="(condition, index) in conditions"
+						:key="condition.id"
+						class="grid filter-row gap-025 align-items-center p-025"
+					>
+						<!-- Connector (AND/OR) - display only for now -->
+						<div v-if="index > 0" class="min-w-20px">
+							<span class="txt12 opacity-6">{{ condition.connector === 'or' ? currentTexts.connectors.or : currentTexts.connectors.and }}</span>
+						</div>
+						<div v-else class="min-w-20px" />
+
+						<!-- Field selector -->
 						<SelectInput
-							v-if="getFieldOptions(condition.field as string)" :model-value="displayValue(condition.value)"
-							:options="getFieldOptions(condition.field as string)!" placeholder="בחר" class="value-input" searchable
-							@update:model-value="(v: string) => updateCondition(index, { value: v })"
+							: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)"
 						/>
+
+						<!-- Operator selector -->
 						<SelectInput
-							v-else-if="getFieldType(condition.field as string) === 'boolean'"
-							:model-value="displayValue(condition.value)" :options="booleanOptions" placeholder="בחר"
-							class="value-input" @update:model-value="(v: string) => updateCondition(index, { value: v })"
-						/>
-						<DateInput
-							v-else-if="getFieldType(condition.field as string) === 'date'"
-							:model-value="displayValue(condition.value)" placeholder="בחר תאריך" class="value-input"
-							@update:model-value="(v: any) => updateCondition(index, { value: String(v) })"
-						/>
-						<TextInput
-							v-else-if="getFieldType(condition.field as string) === 'number'"
-							:model-value="displayValue(condition.value)" placeholder="0" type="number" class="value-input"
-							@update:model-value="(v: string) => updateCondition(index, { value: v })"
+							: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)"
 						/>
-						<TextInput
-							v-else :model-value="displayValue(condition.value)" placeholder="ערך" class="value-input"
-							@update:model-value="(v: string) => updateCondition(index, { value: v })"
-						/>
-					</template>
-					<div v-else class="value-placeholder" />
 
-					<!-- Remove button -->
-					<Btn icon="close" flat round thin color="gray" @click="removeCondition(index)" />
-				</div>
-			</TransitionGroup>
+						<!-- Value input - type-specific -->
+						<template v-if="needsValue(condition.operator)">
+							<SelectInput
+								v-if="getFieldOptions(condition.field)"
+								:model-value="condition.value"
+								: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)"
+							/>
+							<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)"
+							/>
+							<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))"
+							/>
+							<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)"
+							/>
+							<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)"
+							/>
+						</template>
+						<div v-else />
+
+						<!-- Remove button -->
+						<Btn icon="close" thin flat size="small" class="m_bg-gray-40 m_px-3 m_mx-auto" @click="removeCondition(condition.field)" />
+					</div>
+				</TransitionGroup>
+			</div>
 
-			<div class="flex gap-05 mt-075">
-				<Btn icon="add" flat thin value="הוסף תנאי" @click="addCondition" />
-				<Btn v-if="model.length > 0" icon="delete_sweep" flat thin color="gray" value="נקה הכל" @click="clearAll" />
+			<div class="flex gap-1 space-between">
+				<Btn icon="add" flat thin :value="currentTexts.buttons.addCondition" @click="addCondition" />
+				<Btn v-if="conditions.length > 0" icon="delete_sweep" flat thin color="gray" :value="currentTexts.buttons.clearAll" @click="clearAll" />
 			</div>
 		</div>
 	</Dropdown>
 </template>
 
 <style scoped>
-.filter-builder {
-  --input-font-size: 12px;
-  --input-height: 30px;
-  /* --input-border-radius: 100px; */
-  /* --input-bg: var(--bgl-primary-light); */
-  /* --input-color: var(--bgl-primary); */
-  min-width: 520px;
-  max-width: 90vw;
-  padding: 0.5rem;
-}
-
-.field-select {
-  flex: 1;
-  min-width: 120px;
-  margin: 0;
-}
-
-.operator-select {
-  min-width: 120px;
-  margin: 0;
-}
-
-.value-input {
-  flex: 1;
-  min-width: 100px;
-  margin: 0;
+.filter-row {
+	grid-template-columns: auto minmax(90px, 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
 }
-
-.value-placeholder {
-  flex: 1;
-  min-width: 100px;
-}
-
-/* Transition animations */
+																/* Transition animations */
 .condition-enter-active,
 .condition-leave-active {
   transition: all 0.25s ease;
@@ -264,4 +406,19 @@ const activeFiltersCount = computed(() => {
 :dir(rtl) .condition-leave-to {
   transform: translateX(-10px);
 }
+@media (max-width: 910px) {
+	.filter-row {
+		grid-template-columns: auto;
+	}
+}
+</style>
+
+<style>
+.borderHover * {
+	transition: all 0.2s ease-in-out !important;
+}
+
+.borderHover:hover {
+	--border-color: var(--bgl-primary);
+}
 </style>