Vue.js 3 Query Builder

Usage:

vue.js 3 Query Builder customize operator felids, The query builder can be used by simply importing the component and using inside a vue component:

<template>
  ...
  <query-builder v-model="filter" :filter-fields="filter_fields" :color="color">
  </query-builder>
  ...
</template>

Composition API:
<script setup>
import QueryBuilder from '@vue.js-3/vuetify-query-builder'
import '@vue.js-3/vuetify-query-builder/dist/style.css'
import { ref } from 'vue'
let query = ref({})
const filter_fields = ['id', 'name', 'date', 'gender']
const color = 'royalblue'
</script>

Expected parameters:

class QueryBuilder {
  modelValue: {} | Query
  filterFields: Array<string>
  color: String
}

'modelValue' parameter:

interface Query {
  logicalOperator: LogicalOperator // "AND" or "OR"
  children: Children<Query | QueryRule> // An array of child elements (either groups or rules)
}

interface QueryRule {
  rule?: string
  operator: Operator['value']
  operand: string
  value: Array<string | number> | string | number | null
}

Example: