@bagelink/vue 1.10.19 → 1.10.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.10.19",
+  "version": "1.10.23",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.10.19"
+    "@bagelink/utils": "1.10.23"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/Filter.vue

@@ -251,7 +251,16 @@ function getConditionIndex(id: string): number {
 
 function onFieldChange(id: string, newField: string) {
 	const index = getConditionIndex(id)
-	if (index >= 0) updateConditionAtIndex(index, { field: newField })
+	if (index < 0) return
+	const fieldDef = getFieldDef(newField)
+	const multi = !!(fieldDef?.multiple && fieldDef?.options)
+	const validOps = getOperatorsForType(fieldDef?.type || 'string', !!fieldDef?.options, multi)
+	const defaultOp = (multi ? 'in' : validOps[0]?.value ?? 'eq') as ComparisonOperator
+	updateConditionAtIndex(index, {
+		field: newField,
+		op: defaultOp,
+		value: multi ? [] : '',
+	})
 }
 
 function onOperatorChange(id: string, operator: ComparisonOperator) {
@@ -333,6 +342,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 						<template v-if="needsValue(condition.operator)">
 							<SelectInput
 								v-if="getFieldOptions(condition.field) && isMultiOperator(condition.operator)"
+								:key="`${condition.id}-${condition.field}-multi`"
 								:model-value="Array.isArray(condition.value) ? condition.value : []"
 								:options="getFieldOptions(condition.field)!"
 								:placeholder="currentTexts.placeholders.selectOption"
@@ -340,7 +350,9 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 								@update:model-value="(v: string[]) => onValueChange(condition.id, v)"
 							/>
 							<SelectInput
-								v-else-if="getFieldOptions(condition.field)" :model-value="condition.value"
+								v-else-if="getFieldOptions(condition.field)"
+								:key="`${condition.id}-${condition.field}-single`"
+								:model-value="condition.value"
 								:options="getFieldOptions(condition.field)!"
 								:placeholder="currentTexts.placeholders.selectOption"
 								class="m-0 light-input borderHover" searchable
@@ -348,6 +360,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 							/>
 							<SelectInput
 								v-else-if="getFieldType(condition.field) === 'boolean'"
+								:key="`${condition.id}-${condition.field}-bool`"
 								:model-value="condition.value" :options="booleanOptions"
 								:placeholder="currentTexts.placeholders.selectOption"
 								class="m-0 light-input borderHover"
@@ -355,12 +368,14 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 							/>
 							<DateInput
 								v-else-if="getFieldType(condition.field) === 'date'"
+								:key="`${condition.id}-${condition.field}-date`"
 								:model-value="(condition.value as string)"
 								:placeholder="currentTexts.placeholders.selectDate" class="m-0 light-input borderHover"
 								@update:model-value="(v: any) => onValueChange(condition.id, String(v))"
 							/>
 							<TextInput
 								v-else-if="getFieldType(condition.field) === 'number'"
+								:key="`${condition.id}-${condition.field}-number`"
 								:model-value="(condition.value as string)" placeholder="0" type="number"
 								class="m-0 light-input borderHover"
 								@update:model-value="(v: string) => onValueChange(condition.id, v)"
@@ -417,7 +432,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 
 .first-filter-row {
 	grid-template-columns: minmax(calc(140px + 0.25rem), 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
-		padding-top: 0 !important;
+	padding-top: 0 !important;
 }
 
 .filter-row {
@@ -449,8 +464,9 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 }
 
 @media (max-width: 910px) {
-		.filter-row,
-			.first-filter-row {
+
+	.filter-row,
+	.first-filter-row {
 		grid-template-columns: auto;
 	}
 }