src/components/queryBuilder/Condition.vue

@@ -24,15 +24,25 @@
           :value="(value as any)?.start"
           @input="(e) => ((value as any).start = (e.target as HTMLInputElement).value)"
           :type="inputType"
+          :min="columnType == 'boolean' ? 0 : undefined"
+          :max="columnType == 'boolean' ? 1 : undefined"
         />
         <p>-</p>
         <input
           :value="(value as any)?.end"
           @input="(e) => ((value as any).end = (e.target as HTMLInputElement).value)"
           :type="inputType"
+          :min="columnType == 'boolean' ? 0 : undefined"
+          :max="columnType == 'boolean' ? 1 : undefined"
         />
       </div>
-      <input v-else v-model="value" :type="inputType" />
+      <input
+        v-else
+        v-model="value"
+        :type="inputType"
+        :min="columnType == 'boolean' ? 0 : undefined"
+        :max="columnType == 'boolean' ? 1 : undefined"
+      />
     </div>
 
     <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
@@ -79,16 +89,20 @@ export default defineComponent({
     foreignColumns() {
       return this.activeTable?.relations.map((r) => r.column);
     },
+    columnType() {
+      return this.activeTable?.columns.find((c) => c.column == this.column)?.type;
+    },
     inputType() {
-      let type = this.activeTable?.columns.find((c) => c.column == this.column)?.type;
       if (this.operation.includes("timespan")) return "number";
-      switch (type) {
+      switch (this.columnType) {
         case "int":
           return "number";
         case "varchar":
           return "text";
         case "date":
           return "date";
+        case "boolean":
+          return "number"; // "checkbox";
         default:
           return "text";
       }