@jtekt/iss-query-filters

@jtekt/iss-query-filters

A reusable QueryFilter component built with Vue 3 + Vuetify 3.

It lets users build nested AND/OR filter trees and outputs a query object via v-model.

Install

npm install @jtekt/iss-query-filters
# peer deps
npm install vue vuetify

Usage

// main.ts
import { createApp } from "vue";
import App from "./App.vue";

import "vuetify/styles";
import { createVuetify } from "vuetify";

import { QueryFilterPlugin } from "@jtekt/iss-query-filters";

// NOTE: Starting version 0.3.0, it's not necessary to import style.css
import "@jtekt/iss-query-filters/style.css";

const vuetify = createVuetify();

createApp(App).use(vuetify).use(QueryFilterPlugin).mount("#app");

<script setup lang="ts">
import { ref } from "vue";

const query = ref<Record<string, any>>({});
const loading = ref(false);
</script>

<template>
  <QueryFilter
    v-model="query"
    :fields="['_id', 'description', 'title']"
    :loading="loading"
  />
</template>

show-limit-field

Controls whether the Limit field is displayed in the QueryFilter component.

Use this when your page does not already manage pagination or items-per-page.
If your table or data list already handles page size, keep this set to false to avoid duplicate limit controls.

Type: boolean
Default: false

// It can also be imported it directly as a component not plugin
import { QueryFilter } from "@jtekt/iss-query-filters";

<QueryFilter
  v-model="query"
  :fields="['_id', 'description', 'title']"
  :loading="loading"
  :show-limit-field="true"
/>

query will contain keys like from, to, limit, regex, and filter (JSON string with your nested AND/OR Mongo-like query).

License

This project is licensed under the MIT License - see the LICENSE file for details.