@bagelink/vue 1.9.67 → 1.9.71

package/package.json

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

package/src/components/Filter.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { Option } from '@bagelink/vue'
 import type { ComparisonOperator, LogicalOperator, QueryConditions } from '../utils/queryFilter'
-import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput, useI18n } from '@bagelink/vue'
-import { computed } from 'vue'
+import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput, useI18n, useDebounceFn } from '@bagelink/vue'
+import { computed, ref, useAttrs } from 'vue'
 
 type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
 
@@ -25,11 +25,28 @@ const props = defineProps<{
 
 const emit = defineEmits<{
 	change: [value: QueryConditions<T>]
+	save: [value: QueryConditions<T>]
 }>()
 
 const model = defineModel<QueryConditions<T>>({ default: () => [] })
 
+// Internal working copy — may contain incomplete conditions for UI purposes
+const internalModel = ref<QueryConditions<T>>([...model.value] as QueryConditions<T>)
+
 const { $t } = useI18n()
+const attrs = useAttrs()
+const hasSaveListener = computed(() => !!attrs.onSave)
+
+function isComplete(c: { field: string, op: ComparisonOperator, value: any }) {
+	return c.field && c.op && (c.op === 'pr' || (c.value !== '' && c.value !== null && c.value !== undefined))
+}
+
+const debouncedFlush = useDebounceFn(() => {
+	const complete = internalModel.value.filter(isComplete) as QueryConditions<T>
+	console.log('[Filter] flushing - internal:', internalModel.value, '| complete:', complete)
+	model.value = complete
+	emit('change', complete)
+}, 400)
 
 let conditionIdCounter = 0
 function generateId() {
@@ -76,7 +93,7 @@ const currentTexts = computed(() => ({
 const conditionIds = new Map<number, string>()
 
 const conditions = computed(() => {
-	const arr = model.value || []
+	const arr = internalModel.value || []
 	return arr.map((cond, index) => {
 		// Get or create stable ID for this index
 		if (!conditionIds.has(index)) {
@@ -142,7 +159,7 @@ function parseValue(value: string | number | boolean | null): string | number |
 }
 
 function updateConditionAtIndex(index: number, updates: Partial<{ field: string, op: ComparisonOperator, value: string | number | boolean | null, connector: LogicalOperator }>) {
-	const newModel = [...model.value]
+	const newModel = [...internalModel.value]
 	const existing = newModel[index]
 	if (!existing) return
 
@@ -153,8 +170,8 @@ function updateConditionAtIndex(index: number, updates: Partial<{ field: string,
 	if (updates.connector !== undefined) updated.connector = updates.connector
 
 	newModel[index] = updated
-	model.value = newModel
-	emit('change', newModel)
+	internalModel.value = newModel as QueryConditions<T>
+	debouncedFlush()
 }
 
 function addCondition() {
@@ -165,28 +182,28 @@ function addCondition() {
 		value: '' as any,
 		connector: model.value.length > 0 ? 'and' as LogicalOperator : undefined,
 	}
-	const newModel = [...model.value, newCondition]
-	model.value = newModel
-	emit('change', newModel)
+	const newModel = [...internalModel.value, newCondition]
+	internalModel.value = newModel as QueryConditions<T>
+	console.log('[Filter] addCondition - skipping flush (incomplete)')
 }
 
 function removeCondition(index: number) {
-	const newModel = [...model.value]
+	const newModel = [...internalModel.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)
+	internalModel.value = newModel as QueryConditions<T>
+	debouncedFlush()
 }
 
 function clearAll() {
 	conditionIds.clear()
-	model.value = []
-	emit('change', [])
+	internalModel.value = [] as unknown as QueryConditions<T>
+	model.value = [] as unknown as QueryConditions<T>
+	console.log('[Filter] clearAll')
+	emit('change', [] as unknown as QueryConditions<T>)
 }
 
 function getFieldType(fieldValue: string): string {
@@ -245,9 +262,11 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 				<TransitionGroup name="condition">
 					<div
 						v-for="(condition, index) in conditions" :key="condition.id"
-						class="grid filter-row gap-025 align-items-center pt-025" :class="{
+						class="grid 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',
+							'first-filter-row': index === 0,
+							'filter-row': index > 0,
 						}"
 					>
 						<!-- Connector (AND/OR) -->
@@ -260,7 +279,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 								@update:model-value="(v: LogicalOperator) => onConnectorChange(condition.id, v)"
 							/>
 						</div>
-						<div v-else />
+						<!-- <div v-else /> -->
 
 						<!-- Field selector -->
 						<SelectInput
@@ -324,10 +343,16 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 
 			<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 class="flex gap-05">
+					<Btn
+						v-if="conditions.length > 0" icon="delete_sweep" flat thin color="gray"
+						:value="currentTexts.buttons.clearAll" @click="clearAll"
+					/>
+					<Btn
+						v-if="hasSaveListener" icon="save" thin color="primary" :value="$t('filter.buttons.save')"
+						@click="emit('save', internalModel.filter(isComplete))"
+					/>
+				</div>
 			</div>
 		</div>
 	</Dropdown>
@@ -347,6 +372,10 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 	font-size: 12px !important;
 }
 
+.first-filter-row {
+	grid-template-columns: minmax(90px, 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
+}
+
 .filter-row {
 	grid-template-columns: 50px minmax(90px, 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
 }